Javascript 计时器在页面中使用多次

Question

我有这个 Javascript 倒数计时器，它运行得很好。唯一的问题是我只能在一页中使用它一次。我想多次使用它。

我认为脚本使用id ="timer"，这就是我无法多次使用它的原因。

下面是JS代码:

<script>
var startTime = 60; //in Minutes
var doneClass = "done"; //optional styling applied to text when timer is done
var space = '       ';

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  var intervalLoop = 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 = "00" + space + minutes + space + seconds;
    if (--timer < 0) {
      document.querySelector("#timer").classList.add(doneClass);
      clearInterval(intervalLoop);
    }
  }, 1000);
}

window.onload = function() {
  var now = new Date();
  var hrs = now.getHours();
  var setMinutes = 60 * (startTime - now.getMinutes() - (now.getSeconds() / 100)),
    display = document.querySelector("#timer");

  startTimer(setMinutes, display);
};
</script>

Answer 1

只需在 startTimer 函数之外声明 intervalLoop，它将在全局范围内可用。

var intervalLoop = null

function startTimer(duration, display) {
  intervalLoop = setInterval(function() { .... }
})


function stopTimer() {
  clearInterval(intervalLoop) // Also available here!
})