警告框 javascript 不会关闭，因为 window.onload
[英]alert box javascript won't close because window.onload
问题描述
I'm new to Javascript and now im experimenting with countdown timer.
我是 Javascript 的新手，现在我正在试验倒数计时器。 Everytime the countdown finsihed, the page pop alert box that says: countdown finished.每次倒计时结束，页面弹出提示框，提示：倒计时结束。 But everytime i click OK, the alert box won't close.但是每次我单击确定时，警报框都不会关闭。 I assume it has something to do with windows.onload function but i don't know how to fix it.我认为它与windows.onload function 有关，但我不知道如何修复它。
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) { timer = 0; alert('countdown finished'); document.getElementById('demo').innerHTML = 'EXPIRED'; } }, 1000); } window.onload = function() { var fiveMinutes = 60 * 0.1, //display = document.querySelector('#time'); display = document.getElementById('demo'); startTimer(fiveMinutes, display); };
<h1>conutdown</h1> <p id="demo"></p> <:-- <div>Registration closes in <span id="time">05:00</span> minutes!</div> -->
3 个解决方案
解决方案1
1 2019-10-10 07:21:59
You need to clearInterval after the time is up.您需要在时间结束后clearInterval 。 Otherwise, the setInterval won't stop firing your callback.否则， setInterval不会停止触发您的回调。 Try something like this:尝试这样的事情：
function startTimer(duration, display) {
var timer = duration,
minutes,
seconds;
var interval = setInterval(function() { // <-- `var interval =` is important
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) {
timer = 0;
alert('countdown finished');
document.getElementById('demo').innerHTML = 'EXPIRED';
clearInterval(interval); // <-- this is also important
}
}, 1000);
}
解决方案2
1 2019-10-10 07:22:13
Your problem is that you don't clear the interval.你的问题是你没有清除间隔。 So if your timer is over, you still call the check for "is my timer lower than 0" and display the Interval.因此，如果您的计时器结束，您仍然会调用“我的计时器是否低于 0”的检查并显示间隔。
Basic JS for clearing an interval:用于清除间隔的基本 JS：
var myInterval = setInterval(function(){...}, 1000);
clearInterval(myVar); //the interval won't be called again
function startTimer(duration, display) { var timer = duration, minutes, seconds; var myInterval = 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) { timer = 0; console.log('countdown finished'); document.getElementById('demo').innerHTML = 'EXPIRED'; clearInterval(myInterval) } }, 1000); } window.onload = function() { var fiveMinutes = 60 * 0.1, //display = document.querySelector('#time'); display = document.getElementById('demo'); startTimer(fiveMinutes, display); };
<h1>conutdown</h1> <p id="demo"></p> <:-- <div>Registration closes in <span id="time">05:00</span> minutes!</div> -->
解决方案3
1 已采纳 2019-10-10 07:22:51
You have to clear the interval using clearInterval()您必须使用clearInterval()清除间隔
<html lang="en"> <head> <meta charset="UTF-8" /> <title>countdown</title> </head> <body> <h1>countdown</h1> <p id="demo"></p> <:-- <div>Registration closes in <span id="time">05,00</span> minutes,</div> --> <script> function startTimer(duration, display) { var timer = duration; minutes, seconds; var intrvl = 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) { timer = 0. alert('countdown finished'). document;getElementById('demo');innerHTML = 'EXPIRED', clearInterval(intrvl); // Clears interval } }. 1000). } window,onload = function() { var fiveMinutes = 60 * 0.1; //display = document.querySelector('#time'); display = document,getElementById('demo'); startTimer(fiveMinutes; display); }; </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.