带有 JSfiddle 示例的 javascript/jquery 倒数计时器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8031680/
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
javascript/jquery countdown timer with JSfiddle example?
提问by cgweb87
I am building a few things and one of them is a countdown timer, the countdown will never be over an hour so all I need to do is countdown minutes and seconds.
我正在构建一些东西，其中一个是倒数计时器，倒计时永远不会超过一个小时，所以我需要做的就是倒计时分钟和秒。
I have it partially working, but the problem is with the leading zeros. I got it to work in the seconds but not with the minutes.
我让它部分工作，但问题在于前导零。我让它在几秒钟内工作，但不是几分钟。
Check out my example http://jsfiddle.net/cgweb87/GHNtk/
看看我的例子http://jsfiddle.net/cgweb87/GHNtk/
JavaScript
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
HTML
<span>10:10</span>
What I want to happen is the countdown timer can begin anywhere under 1 hour, it will count down with leading zeros ie in this format;
我想要发生的是倒数计时器可以在 1 小时内的任何地方开始，它将以前导零倒计时，即以这种格式；
08:49 46:09
08:49 46:09
And when it reaches the countdown to simply just display:
当它到达倒计时只显示：
00:00
00:00
Thanks for any input, and I don't want to use plugins, I want to learn it.
感谢您的任何输入，我不想使用插件，我想学习它。
回答by Jonathan Lonowski
setIntervalreturns an identity you can use later to clearInterval:
setInterval返回一个您可以稍后使用的身份clearInterval：
var interval = setInterval(function() {
/* snip */
$('span').html(minutes + ':' + seconds);
if (parseInt(minutes, 10) == 0 && parseInt(seconds, 10) == 0)
clearInterval(interval);
}, 1000);
And, to avoid the ever-increasing minutes -- 00000001:42-- either:
而且，为了避免不断增加的分钟 -- 00000001:42-- 要么：
- change
length.minutestominutes.lengthin your prefix test. - cast the values to Numbers when retrieving --
var minutes = parseInt(timer[0], 10);-- and just testif (minutes < 10) ....
- 在您的前缀测试中更改
length.minutes为minutes.length。 - 检索时将值转换为 Numbers
var minutes = parseInt(timer[0], 10);-- 并且只是测试if (minutes < 10) ...。
Taking option #2, here's an update: http://jsfiddle.net/BH8q9/
选择#2，这里有一个更新：http: //jsfiddle.net/BH8q9/
回答by epascarello
to check the length of a string, it is not
检查字符串的长度，它不是
length.minuteslength.seconds
length.minuteslength.seconds
it is
它是
minutes.lengthseconds.length
minutes.lengthseconds.length
回答by Todd
Made a few simple changes to your code and it works as you'd like:
对您的代码进行了一些简单的更改，它可以按您的意愿工作：
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);
I moved the if ((minutes < 10).... line down to happen after the minutes -= 1; otherwise at 9:59, you won't get the extra 0. Also length.minutesis the wrong way around, it'd need to be minutes.length-- but to make sure it's being treated as a string (which has a length, whereas a number doesn't), I added a blank string to it and then took the length of that.. This is what ((minutes+'').length < 2does (checks that you have the leading zero).. This is really the best way to accomplish it, but it's the closest to your existing code.
我移动了 if ((minutes < 10).... 行在分钟之后发生 -= 1; 否则在 9:59，你不会得到额外的 0。也是length.minutes错误的方式，它会需要minutes.length- 但为了确保它被视为一个字符串（它有一个长度，而一个数字没有），我向它添加了一个空白字符串，然后取了它的长度..这就是((minutes+'').length < 2（检查您是否有前导零).. 这确实是完成它的最佳方式，但它最接近您现有的代码。
回答by zequinha-bsb
I understand that an answer has already being accepted but would like to throw in my 2c: I like to avoid extra coding whenever possible. Using Jonathan Lonowski's approach, I would improve it like:
我知道一个答案已经被接受，但想加入我的 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);
