CODEWITHSUNDEEP
javascriptphp
Tomer Kravitz
Tomer Kravitz

Reputation: 15

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

<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:

Upvotes: 1

Views: 828

Answers (1)

Visconti
Visconti

Reputation: 57

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

Upvotes: 1

Related Questions