警告框 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