警报框 JavaScript 不会关闭，因为 window.onload

我是Javascript的新手，现在我正在尝试倒数计时器。每次倒计时结束时，页面弹出警报框，上面写着：倒计时完成。但是每次我单击"确定"时，警报框都不会关闭。我认为它与windows.onload功能有关，但我不知道如何解决它。

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> -->

您必须使用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>

您需要在时间结束后clearInterval。否则，setInterval不会停止触发您的回调。尝试这样的事情：

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);
}

您的问题是您没有清除间隔。因此，如果您的计时器结束，您仍然调用检查"我的计时器是否低于 0"并显示间隔。

用于清除间隔的基本 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> -->

相关内容

最新更新

热门标签：