带有 JSfiddle 示例的 javascript/jquery 倒数计时器？答案

【问题标题】：javascript/jquery countdown timer with JSfiddle example?带有 JSfiddle 示例的 javascript/jquery 倒数计时器？
【发布时间】：2011-11-07 00:53:36
【问题描述】：

我正在构建一些东西，其中之一是倒计时，倒计时永远不会超过一个小时，所以我需要做的就是倒计时分秒。

我让它部分工作，但问题在于前导零。我让它在几秒钟内工作，但不是几分钟。

看看我的例子http://jsfiddle.net/cgweb87/GHNtk/

JavaScript

setInterval(function() {
var timer = $('span').html();
timer = timer.split(':');
var minutes = timer[0];
var seconds = timer[1];
seconds -= 1;
if (minutes < 0) return;
if (minutes < 10 && length.minutes != 2) minutes = '0' + minutes;
if (seconds < 0 && minutes != 0) {
    minutes -= 1;
    seconds = 59;
}
else if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;
    $('span').html(minutes + ':' + seconds);
}, 1000);

HTML

<span>10:10</span>

我想要发生的是倒数计时器可以在 1 小时以下的任何时间开始，它将以前导零倒计时，即这种格式；

08:49 46:09

当它到达倒计时时，只需显示：

00:00

感谢您的任何意见，我不想使用插件，我想学习它。

【问题讨论】：

我认为你想要minutes.length 而不是length.minutes。 length.seconds 也一样。然后，如果您重新排序语句，它会完美运行：jsfiddle.net/GHNtk/1
好的谢谢会试试这个，很容易让我还在学习:)

标签： javascript jquery timer

【解决方案1】：

setInterval 将您以后可以使用的身份返回给clearInterval：

var interval = setInterval(function() {
    /* snip */
    $('span').html(minutes + ':' + seconds);

    if (parseInt(minutes, 10) == 0 && parseInt(seconds, 10) == 0)
        clearInterval(interval);
}, 1000);

并且，为了避免不断增加的分钟——00000001:42——要么：

在前缀测试中将 length.minutes 更改为 minutes.length。
在检索时将值转换为 Numbers -- var minutes = parseInt(timer[0], 10); -- 并且只需测试 if (minutes < 10) ...。

采用选项 #2，这是更新：http://jsfiddle.net/BH8q9/

【讨论】：

感谢您提供更详细的解释！
如果倒计时结束，使用 clearInterval 会阻止代码正常运行？
@cgweb87 是的，它应该防止和删除任何进一步的间隔。

【解决方案2】：

检查字符串的长度，不是

length.minutes length.seconds

是的

minutes.length seconds.length

【讨论】：

【解决方案3】：

对您的代码进行了一些简单的更改，它可以按您的意愿工作：

setInterval(function() {
    var timer = $('span').html();
    timer = timer.split(':');
    var minutes = timer[0];
    var seconds = timer[1];
    seconds -= 1;
    if (minutes < 0) return;
    if (seconds < 0 && minutes != 0) {
        minutes -= 1;
        seconds = 59;
    }
    else if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;
    if ((minutes < 10) && ((minutes+'').length < 2)) minutes = '0' + minutes;
    $('span').html(minutes + ':' + seconds);
}, 1000);

我将 if ((minutes length.minutes 也是错误的顺便说一句，它需要是minutes.length——但为了确保它被视为一个字符串（它有一个长度，而一个数字没有），我向它添加了一个空白字符串，然后取了长度其中.. 这就是 ((minutes+'').length < 2 所做的（检查您是否有前导零）.. 这确实是完成它的最佳方法，但它最接近您现有的代码。

【讨论】：

【解决方案4】：

我知道一个答案已经被接受，但想加入我的 2c：我喜欢尽可能避免额外的编码。使用 Jonathan Lonowski 的方法，我会改进它：

var interval = setInterval(function() {
    var timer = $('span').html().split(':');
    //by parsing integer, I avoid all extra string processing
    var minutes = parseInt(timer[0],10);
    var seconds = parseInt(timer[1],10);
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0) clearInterval(interval);
    seconds = (seconds < 0) ? 59 : seconds;
    seconds = (seconds < 10) ? '0' + seconds : seconds;
    minutes = (minutes < 10) ?  '0' + minutes : minutes;
    $('span').html(minutes + ':' + seconds);
}, 1000);

【讨论】：