javascript - 带停止按钮的倒计时

Question

我尝试构建一个倒计时器，它确实有效，但是当我更改代码以使其更具可读性时，并且当我添加停止按钮功能时，它出现了一些错误。我摆弄了很多，但我无法让它再次工作。 我遇到的问题是，倒计时从页面加载的时间开始，而不是从分配给“sessTime”的数字开始。 这是代码(我知道它很多，抱歉):

var startButton = document.getElementById('btnStart');
var stopButton = document.getElementById('btnStop');
var sessionTime = parseInt(document.getElementById('sessNum').innerHTML); //gets duration number
var sessLength = Date.parse(new Date()) + sessionTime * 60 * 1000;

startButton.onclick = function() {
  if (!sessTimer) { 
   startButton.value="Stop";
   var sessTimer = setInterval(runSess, 1000);
  }else{
    startButton.value="Start";
    clearInterval(sessTimer);   
  }
}; 

function runSess() {  
  var timeLeft = sessLength - Date.parse(new Date());
  var seconds = Math.floor((timeLeft / 1000) % 60);
  var minutes = Math.floor((timeLeft / 1000 / 60) % 60);
  var hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);  

  document.getElementById("hours").innerHTML = ('0' + hours).slice(-2);
  document.getElementById("minutes").innerHTML = ('0' + minutes).slice(-2);
  document.getElementById("seconds").innerHTML = ('0' + seconds).slice(-2);

  if (timeLeft <= 0) {
    clearInterval(sessTimer);
  }
}

此代码是 codepen project 的一部分我的。也许上下文有助于回答这个问题。

提前致谢，非常感谢您的帮助。

Answer 1

您已在函数范围内声明了 sessTimer。

startButton.onclick = function() {
  if (!sessTimer) { 
   startButton.value="Stop";
   var sessTimer = setInterval(runSess, 1000);   

使用上面的代码，每次进入该函数时，sessTimer 都是未定义的，并且您声明一个新的。您可以执行以下操作:

var sessTimer = null;
startButton.onclick = function() {
  if (!sessTimer) { 
   startButton.value="Stop";
   sessTimer = setInterval(runSess, 1000);

  }else{
    startButton.value="Start";
    clearInterval(sessTimer);   
    sessTimer = null;
  }
}; 

进入您的功能，您还需要更改按钮:

  if (timeLeft <= 0) {
    startButton.value="Start";
    clearInterval(sessTimer);
  }