Question

我尝试构建一个倒数计时器，它有点工作，但是当我更改代码使其更具可读性时，当我添加了停止按钮功能时，它有点儿麻烦。我摆弄了很多东西，但我无法让它再次运转。我遇到的问题是倒计时从页面加载时开始，而不是从分配给＆＃34; sessTime＆＃34;的数字开始。这是代码（我知道很多，抱歉）：

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

倒计时停止按钮

1 个答案: