using javascript countdown with server side time

Question

I have two scripts one in PHP to get the time server side, and the other is a JavaScript countdown based on a date and time. I am not sure what I am doing wrong, but when I pass the date and time to the javascript, it shows 0days 0 hours and1 second and then expires. No matter how far in the future I set the date and time, this always happens. What can I do to pass the time correctly into this JavaScript code?

<?php
$date = 'July 19 2011 05:00:00 PM PDT';
$exp_date = "var end = new Date('". $date ."');";
$todays_date = date("F j Y g:i:s A T");

if ($todays_date < $exp_date) {
?>
<script>
<?php echo $exp_date ;?>

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;

function showRemaining()
{
    var now = new Date();
    var distance = end - now;
    if (distance < 0 ) {
       clearInterval( timer );
       document.getElementById('countdown').innerHTML = 'EXPIRED!';

       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor( (distance % _day ) / _hour );
    var minutes = Math.floor( (distance % _hour) / _minute );
    var seconds = Math.floor( (distance % _minute) / _second );

    document.getElementById('countdown').innerHTML = 'Days: ' + days + '<br />';
    document.getElementById('countdown').innerHTML += 'Hours: ' + hours+ '<br />';
    document.getElementById('countdown').innerHTML += 'Minutes: ' + minutes+ '<br />';
    document.getElementById('countdown').innerHTML += 'Seconds: ' + seconds+ '<br />';
}

timer = setInterval(showRemaining, 1000);
</script>
<?php
} else {
    echo "Times Up";
}
?>
<div id="countdown"></div>

Ghostoy · Accepted Answer · 2011-07-20 09:10:11Z

9

You should provide both current time and end time to clients because they use their own system time against to the server's time.

Here are the entire solution of this problem.

<?php
$date = 'July 20 2011 05:00:00 PM PDT';
$exp_date = strtotime($date);
$now = time();

if ($now < $exp_date) {
?>
<script>
// Count down milliseconds = server_end - server_now = client_end - client_now
var server_end = <?php echo $exp_date; ?> * 1000;
var server_now = <?php echo time(); ?> * 1000;
var client_now = new Date().getTime();
var end = server_end - server_now + client_now; // this is the real end time

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;

function showRemaining()
{
    var now = new Date();
    var distance = end - now;
    if (distance < 0 ) {
       clearInterval( timer );
       document.getElementById('countdown').innerHTML = 'EXPIRED!';

       return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor( (distance % _day ) / _hour );
    var minutes = Math.floor( (distance % _hour) / _minute );
    var seconds = Math.floor( (distance % _minute) / _second );

    var countdown = document.getElementById('countdown');
    countdown.innerHTML = '';
    if (days) {
        countdown.innerHTML += 'Days: ' + days + '<br />';
    }
    countdown.innerHTML += 'Hours: ' + hours+ '<br />';
    countdown.innerHTML += 'Minutes: ' + minutes+ '<br />';
    countdown.innerHTML += 'Seconds: ' + seconds+ '<br />';
}

timer = setInterval(showRemaining, 1000);
</script>
<?php
} else {
    echo "Times Up";
}
?>
<div id="countdown"></div>

edited Jul 20, 2011 at 9:10

answered Jul 20, 2011 at 5:28

Ghostoy

2,7591 gold badge19 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sarsar Over a year ago

oh wow i had no idea. do i just place that after var end = new Date(<?php echo "\"".$todays_date." PDT\""; ?>); ?

Ghostoy Over a year ago

@sarsar see my correction. Just use them to replace the line var end = ...

Ghostoy Over a year ago

@sarsar my point is that server time may different from user time. Usually the different is only several seconds or minute and not a big deal. But when user deliberately changed the time to an earlier or later time, for example 3 hours ago, it breaks your counter. So my code above fixed this client-server-time problem.

Ghostoy Over a year ago

@sarsar I posted the whole solution and tested myself.

sarsar Over a year ago

thanks so much wow! amazing!! if i could bother you with one last thing? say i set an expiration that lasts less than an hour. this would make the days and hours display 0. how would i go about hiding days and hours for a short expiration date?

cm2 · Accepted Answer · 2013-11-24 07:15:20Z

2

I had problems with @Ghostoy's var distance = end - now;

I noticed my seconds counting down would often pause and skip a number every once in a while. When I displayed the distance, I noticed the milliseconds were shifting a little back and forth.

For example, as I watched the distance countdown, these were my results:

Could be just my computer, but if the problem happens on my machine, then it could happen to someone else. As a result, I suggest changing var distance to this:

var distance = Math.round((end - now)/1000)*1000;

This fixed it on my machine.

edited Nov 24, 2013 at 7:15

cm2

1,81515 silver badges20 bronze badges

answered Nov 24, 2013 at 6:39

Clint Decker

1311 silver badge3 bronze badges

Comments

Edgar Velasquez Lim · Accepted Answer · 2011-07-20 01:44:15Z

1

var end = new Date(<?php echo "\"".$todays_date." PDT\""; ?>); // set expiry date and time..

Why are you using today's date as the end(expiration date)? This may be your problem unless I have fundamentally misunderstood your code?

answered Jul 20, 2011 at 1:44

Edgar Velasquez Lim

2,44418 silver badges15 bronze badges

Collectives™ on Stack Overflow

using javascript countdown with server side time

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related