使用javascript倒计时与服务器端时间 [英] using javascript countdown with server side time

问题描述

我有两个脚本，一个用PHP来获取时间服务器端，另一个是基于日期和时间的JavaScript倒计时。我不确定我做错了什么，但是当我将日期和时间传递给javascript时，它显示0days 0小时和1秒然后到期。无论将来我设定日期和时间有多远，这都会发生。我该怎么做才能将时间正确地传递给这个JavaScript代码？

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>

推荐答案

您应该向客户提供当前时间和结束时间因为他们使用自己的系统时间来对服务器的时间。

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>

这篇关于使用javascript倒计时与服务器端时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！