警告框 javascript 不会关闭，因为 window.onload

Question

我是 Javascript 的新手，现在我正在试验倒数计时器。 每次倒计时结束，页面弹出提示框，提示：倒计时结束。 但是每次我单击确定时，警报框都不会关闭。 我认为它与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> -->

Answer 1

您需要在时间结束后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);
}

Answer 2

你的问题是你没有清除间隔。 因此，如果您的计时器结束，您仍然会调用“我的计时器是否低于 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> -->

Answer 3

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

警告框 javascript 不会关闭，因为 window.onload

问题描述

3 个解决方案

解决方案1
1 2019-10-10 07:21:59

解决方案2
1 2019-10-10 07:22:13

解决方案3
1 已采纳 2019-10-10 07:22:51

警告框 javascript 不会关闭，因为 window.onload

问题描述

3 个解决方案

解决方案1 1 2019-10-10 07:21:59

解决方案2 1 2019-10-10 07:22:13

解决方案3 1 已采纳 2019-10-10 07:22:51

解决方案1
1 2019-10-10 07:21:59

解决方案2
1 2019-10-10 07:22:13

解决方案3
1 已采纳 2019-10-10 07:22:51