how to make countdown in server side by using php and javascript

Question

<html>
    <head>
        <link rel="stylesheet" href="http://sroogle.hol.es/compile/flipclock.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://sroogle.hol.es/compile/flipclock.js"></script>      
    </head>
    <body>
        <div class="clock" style="margin:2em;"></div>
        <script type="text/javascript">
            var clock;
            $(document).ready(function() {
                // Instantiate a counter
                clock = new FlipClock($('.clock'), 86400, {
                    clockFace: 'Counter',
                    autoStart: true,
                    countdown: true
                });
            });
        </script>
    </body>
</html>

I made a countdown from a script I found,you can see here about what I'm talking about, http://about-time.hol.es/main.html

The problem is: When I always get into the page, the countdown return to one's previous state, I understand I need a server side solution, so it will start from a specific time I will define and it will start count and keep counting until zero and start over again, and when I will get into the page once again it will still count from the time server I define, without start counting from the start.

this Is the code of the countdown:

Please add relevant code of your question to the the question. A question should stand on its own and not be dependent on external site. Also, please keep in mind to use proper grammar. And make it explicit to where your problem lies that you are facing. — k0pernikus
– k0pernikus, Commented May 18, 2015 at 14:28
Edit your question and add the code there. You can format it and even use a code snipplet to create a live demo, see: blog.stackoverflow.com/2014/09/… — k0pernikus
– k0pernikus, Commented May 18, 2015 at 14:39
hi mike thanks,it seem like a suitable code for me,i've got into jsfiddle to see the code,i've read your conversation with KDJ there,beacuse i'm lack with any program skills,could you please give me this code that it can work? thanks — Tomer Kravitz
– Tomer Kravitz, Commented May 21, 2015 at 19:05

Visconti · Accepted Answer · 2015-05-18 15:06:48Z

I think TS is looking for something like this:

The JS:

<script type="text/javascript">

/*  Change the items below to create your countdown target date and announcement once the target date and time are reached.  */
var current="Winter is here!";     //—>enter what you want the script to display when the target date and time are reached, limit to 20 characters
var year=2010;        //—>Enter the count down target date YEAR
var month=12;          //—>Enter the count down target date MONTH
var day=21;           //—>Enter the count down target date DAY
var hour=18;          //—>Enter the count down target date HOUR (24 hour clock)
var minute=38;        //—>Enter the count down target date MINUTE
var tz=-5;            //—>Offset for your timezone in hours from UTC (see http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location)

//—>    DO NOT CHANGE THE CODE BELOW!    <—
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

function countdown(yr,m,d,hr,min){
    theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
    var today=new Date();
    var todayy=today.getYear();
    if (todayy < 1000) {
    todayy+=1900; }
    var todaym=today.getMonth();
    var todayd=today.getDate();
    var todayh=today.getHours();
    var todaymin=today.getMinutes();
    var todaysec=today.getSeconds();
    var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
    var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
    var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
    var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
    var dd=futurestring-todaystring;
    var dday=Math.floor(dd/(60*60*1000*24)*1);
    var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
    var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
    var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
    if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
        document.getElementById('count2').innerHTML=current;
        document.getElementById('count2').style.display="inline";
        document.getElementById('count2').style.width="390px";
        document.getElementById('dday').style.display="none";
        document.getElementById('dhour').style.display="none";
        document.getElementById('dmin').style.display="none";
        document.getElementById('dsec').style.display="none";
        document.getElementById('days').style.display="none";
        document.getElementById('hours').style.display="none";
        document.getElementById('minutes').style.display="none";
        document.getElementById('seconds').style.display="none";
        return;
    }
    else {
        document.getElementById('count2').style.display="none";
        document.getElementById('dday').innerHTML=dday;
        document.getElementById('dhour').innerHTML=dhour;
        document.getElementById('dmin').innerHTML=dmin;
        document.getElementById('dsec').innerHTML=dsec;
        setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
    }
}
</script>

The content

<body onload="countdown(year,month,day,hour,minute)">
<div id="form">
    <div class="numbers" id="count2" style="position: absolute; top: 10px; height: 60px; padding: 15px 0 0 10px; background-color: #000000; z-index: 20;"></div>
    <img src="images/bkgdimage.gif" class="background" style="position: absolute; left: 69px; top: 12px;"/>
    <img src="images/line.jpg" class="line" style="position: absolute; left: 69px; top: 40px;"/> 
    <div class="numbers" id="dday" style="position: absolute; left: 69px; top: 21px;" ></div>

    <img src="images/bkgdimage.gif" class="background" style="position: absolute; left: 141px; top: 12px;"/>
    <img src="images/line.jpg" class="line" style="position: absolute; left: 141px; top: 40px;"/>
    <div class="numbers" id="dhour" style="position: absolute; left: 141px; top: 21px;" ></div>

    <img src="images/bkgdimage.gif" class="background" style="position: absolute; left: 213px; top: 12px;"/>
    <img src="images/line.jpg" class="line" style="position: absolute; left: 213px; top: 40px;"/>
    <div class="numbers" id="dmin" style="position: absolute; left: 213px; top: 21px;" ></div>

    <img src="images/bkgdimage.gif" class="background" style="position: absolute; left: 285px; top: 12px;"/>
    <img src="images/line.jpg" class="line" style="position: absolute; left: 285px; top: 40px;"/>
    <div class="numbers" id="dsec" style="position: absolute; left: 285px; top: 21px;" ></div>

    <div class="title" id="days" style="position: absolute; left: 66px; top: 73px;" >Days</div>
    <div class="title" id="hours" style="position: absolute; left: 138px; top: 73px;" >Hours</div>
    <div class="title" id="minutes" style="position: absolute; left: 210px; top: 73px;" >Minutes</div>
    <div class="title" id="seconds" style="position: absolute; left: 282px; top: 73px;" >Seconds</div>
</div>

</body>

source: http://www.rmkwebdesign.com/Countdown_Timers/Style_1_D.html

Please don't just add links but copy paste the relevant part of it inside the answer.
Agree, but that's kinda a lot. Will keep it in mind k0pernikus
yes,its something like this,can you help me to change the code so it will show only seconds?

Collectives™ on Stack Overflow

how to make countdown in server side by using php and javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related