使用带有服务器端时间的 javascript 倒计时
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6755940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using javascript countdown with server side time
提问by sarsar
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 中用于获取时间服务器端，另一个是基于日期和时间的 JavaScript 倒计时。我不确定我做错了什么，但是当我将日期和时间传递给 javascript 时，它显示 0days 0 小时 1 秒，然后过期。无论我在未来多久设置日期和时间，这总是发生。我该怎么做才能将时间正确地传递到此 JavaScript 代码中？
<?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>
回答by Ghostoy
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>
回答by Clint Decker
I had problems with @Ghostoy's var distance = end - now;
我遇到了@Ghostoy 的问题 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:
例如，当我观看距离倒计时时，这些是我的结果：
400996000
400995001
400993998
400993002
400991999
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 距离更改为：
var distance = Math.round((end - now)/1000)*1000;
This fixed it on my machine.
这在我的机器上修复了它。
回答by Edgar Velasquez Lim
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?
为什么您使用今天的日期作为结束日期（到期日期）？这可能是您的问题，除非我从根本上误解了您的代码？
