javascript 创建倒数计时器并在倒数归零后重定向到另一个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31775113/
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
Create a countdown timer and redirect to another page after countdown comes to zero
提问by Reza Paidar
I want create a countdown timer for som sections of my asp.net sites with javascript.
The timer starts from various minutes or seconds. After countdown comes to zero, I want stop the timer tick and do somethings like redirect to another page.
I've found this code from google and it's ok, but never stop after countdown comes to zero. please help me to fix this bug.
我想用 javascript 为我的 asp.net 站点的某些部分创建一个倒数计时器。
计时器从不同的分钟或秒开始。倒计时归零后，我想停止计时器滴答并执行诸如重定向到另一个页面之类的操作。
我从谷歌找到了这段代码，它没问题，但在倒计时为零后永远不会停止。请帮我修复这个错误。
<head>
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (timer-- < 0) {
//window.location = "http://www.example.com";
clearInterval(timer);
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
</script>
</head>
<body>
<div>Registration closes in <span id="time">05:00</span></div>
<form id="form1" runat="server">
</form>
</body>
回答by Gotrank
You have to clear what setInterval return. Something like this.
您必须清除 setInterval 返回的内容。像这样的东西。
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var end =setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
//window.location = "http://www.example.com";
clearInterval(end);
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
</script>
</head>
<body>
<div>Registration closes in <span id="time">05:00</span></div>
<form id="form1" runat="server">
</form>回答by TASr
Gotrank's accepted answer is great - one small bug though:
Gotrank 接受的答案很棒——不过有一个小错误：
var fiveMinutes = 5,
...should be...
...应该...
var fiveMinutes = 300,
...for five minutes (it is currently 5 seconds). I would have commented, but I don't have enough reputation points yet.
...五分钟（当前为 5 秒）。我会发表评论，但我还没有足够的声望点。
