jQuery 倒数计时器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3785029/
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
jQuery countdown timer
提问by cicakman
Currently i have this code
目前我有这个代码
setTimeout(function() { $('#hideMsg').fadeOut('fast'); }, 2000);
is it possible for me to put countdown timer for 2 seconds?
我可以将倒数计时器设置为 2 秒吗？
Like
喜欢
<div id="hideMsg">
The entry you posted not valid.
This Box will Close In 2 Seconds
</div>
"This Box will Close In 2 Seconds" will automatically change to 2sec 1sec
“此框将在 2 秒内关闭”将自动更改为 2sec 1sec
回答by Reigel
use setIntervalinstead of setTimeout, then with the combination of clearInterval
使用setInterval而不是setTimeout，然后与clearInterval的组合
var sec = 2
var timer = setInterval(function() {
$('#hideMsg span').text(sec--);
if (sec == -1) {
$('#hideMsg').fadeOut('fast');
clearInterval(timer);
}
}, 1000);
html
html
<div id="hideMsg">
The entry you posted not valid.
This Box will Close In <span>2</span> Seconds
</div>
crazy demo
疯狂的演示
Making it better.
让它变得更好。
var sec = $('#hideMsg span').text() || 0;
var timer = setInterval(function() {
$('#hideMsg span').text(--sec);
if (sec == 0) {
$('#hideMsg').fadeOut('fast');
clearInterval(timer);
}
}, 1000);?
so that the time will depends on what is inside the <span>. For example, <span>2</span>is 2 seconds, <span>5</span>is 5 seconds, and <span>60</span>is 1 minute.
所以时间将取决于里面的内容<span>。例如，<span>2</span>是 2 秒，<span>5</span>是 5 秒，<span>60</span>是 1 分钟。
another crazy demo
另一个疯狂的演示
回答by Peter Ajtai
Note:
笔记：
I didn't realize how similar this was to Reigel's answer until I read his answer. Basically, the only difference is that I use .delay()to hide the divinstead of the interval. Different options...
直到我阅读了他的回答，我才意识到这与 Reigel 的回答有多么相似。基本上，唯一的区别是我使用.delay()隐藏div而不是间隔。不同的选择...
If you put the initial number in a <span>this will count down to zero from whatever that number is:
如果您将初始数字放在 a 中<span>，则无论该数字是什么，这都会倒计时为零：
$(function() {
// Number of seconds counter starts at is what's in the span
var timer, counter = $("#hideMsg span").text();
// Delay the fadeout counter seconds
$('#hideMsg').delay(counter * 1000).fadeOut('fast');
// Update countdown number every second... and count down
timer = setInterval(function() {
$("#hideMsg span").html(--counter);
if (counter == 0) { clearInterval(timer)};
}, 1000);
});?
jsFiddle example
jsFiddle 示例
This makes use of jQuery's native .delay(), and it uses a setInterval()that stops when it gets to zero.
这利用了 jQuery 的 native .delay()，它使用了setInterval()当它变为零时停止的 。
回答by jodm
Do another set timeout after a second and set the .html() of the div like this:
一秒钟后再次设置超时并像这样设置div的.html()：
setTimeout(function() { $('#hideMsg').html('The entry you posted not valid. <br /> This Box will Close In 1 Second'); }, 1000);
Put them in a function and run the function onload like this:
将它们放在一个函数中并像这样在 onload 上运行函数：
<body onload="function_name()">
hope this helps.
希望这可以帮助。
