JavaScript / jQuery 倒计时答案

【问题标题】：JavaScript / jQuery CountdownJavaScript / jQuery 倒计时
【发布时间】：2011-05-08 04:46:24
【问题描述】：

我想要完成的是实时更新的倒计时......像这样：

6 天（只是几天）

12 小时（1 天内仅几个小时）

59 分钟（1 小时内仅几分钟）

59 秒（仅 1 分钟内的秒数）

最好的方法？

【问题讨论】：

这不是我尝试过的问题...我只是想看看是否有一个脚本可以实现这一点。

标签： javascript countdown

【解决方案1】：

您可以在 http://jsfiddle.net/gaby/QH6X8/79/ 找到一个工作示例

var end = new Date('15 Dec 2010');

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 ) {
       // handle expiry here..
       clearInterval( timer ); // stop the timer from continuing ..
       alert('Expired'); // alert a message that the timer has expired..
    }
    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 countdownElement = document.getElementById('countdown');
    countdownElement.innerHTML = 'Days: ' + days + '<br />';
    countdownElement.innerHTML += 'Hours: ' + hours+ '<br />';
    countdownElement.innerHTML += 'Minutes: ' + minutes+ '<br />';
    countdownElement.innerHTML += 'Seconds: ' + seconds+ '<br />';
}

timer = setInterval(showRemaining, 1000);

【讨论】：

完美。这正是我一直在寻找的。谢谢你，盖比！
@Gaby aka G. Petrioli 如果你想在时间到期后显示一条消息，你会怎么做？
@sarsar，在showRemaining方法中，检查距离是否为负。如果是，则它已过期...
@Gaby aka G. Petrioli 这个代码正是我需要的：我不知道搜索这么简单易用的东西多久了。如果我能再打扰你一件事。如果用户刷新它不会重新启动计时器，添加 cookie 需要什么？

【解决方案2】：

jQuery Countdown plugin

【讨论】：

如果可以的话，我想避免使用插件。对于我需要的东西来说有点太重了。
但是，有没有办法在我问的方式中使用这个插件？仅在剩余一整天时显示“天”，仅在剩余不到一天时显示“小时”等？

【解决方案3】：

如果您愿意，您可以在此处生成倒数计时器 - 只需按生成并将结果复制粘贴到 .html 文件中

http://www.ricocheting.com/code/javascript/html-generator/countdown-timer

【讨论】：

【解决方案4】：

值得注意的是：http://www.littlewebthings.com/projects/countdown/ （可能无关紧要，因为您提到您不想使用插件）

【讨论】：

【解决方案5】：

上述被接受的方法的问题是这里会有与时区差异和夏令时相关的问题。看到我问的这个问题Javascript Countdown and Timezone and Daylight Saving Time Issues

【讨论】：

【解决方案6】：

jCounter 提供对您希望倒计时显示的格式以及其他控制设置和方法的控制。

【讨论】：