如何初始化倒数计时器以反映用户输入

Question

我正在根据用户输入创建倒数计时器。当用户暂停和恢复时，计时器在初始输入值处重新启动，并且无法从当前间隔恢复。我已将代码上传到 Codepen。 http://codepen.io/alivera/pen/JGpvRx

  //Timer
var myTimer;
var duration = sessionCounter * 60;
var startTimer = function() { 
    minutes = parseInt(duration / 60);
    seconds = parseInt(duration % 60);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    document.getElementById("clockTimer").innerHTML = minutes + ":" + seconds;
    if (--duration < 0) {
        document.getElementById("toggleStatus").innerHTML = "<br>Break!";
    }
};

//Start Timer
var go = function() {
    myTimer = setInterval(startTimer, 1000);
    document.getElementById('start').innerHTML = "Stop";
    document.getElementById('start').className = "btn btn-danger";
    document.getElementById("start").onclick = stop;
};

//Stop Timer
var stop  = function() {
    clearInterval(myTimer);
    document.getElementById('start').innerHTML = "Start";
    document.getElementById('start').className = "btn btn-success";
    document.getElementById("start").onclick = go;
};

duration.onload = stop();

Answer 1

您正在加载从#clockTimer 元素开始倒计时的时间：

var sessionCounter = document.getElementById("clockTimer").innerHTML;

这很糟糕，因为该元素的内容正在发生变化。经常。

而下一行的parseInt 仅在冒号之前为您提供 的数字。解决此问题的最佳选择是将当前剩余时间和存储在单独的变量中，就像我在下面所做的那样。

您的代码有点难以使用，因此在纠正错误时，我几乎完全重写了它。

这是我的版本；我将逐行（或逐节或其他）解释它：

首先，将我们所有的元素放入易于使用（和类型）的变量中：

var subBreakButton = document.getElementById("subBreakButton"),
    breakTimer = document.getElementById("breakTimer"),
    addBreakButton = document.getElementById("addBreakButton"),
    subSessionButton = document.getElementById("subSessionButton"),
    sessionTimer = document.getElementById("sessionTimer"),
    addSessionButton = document.getElementById("addSessionButton"),
    breakSession = document.getElementById("breakSession"),
    clockTimer = document.getElementById("clockTimer"),

这些变量以 秒 为单位（因此为 m * s）：

    breakLength = 5 * 60, // Minutes to seconds
    sessionLength = 25 * 60, // Minutes to seconds
    sessionTimeLeft = sessionLength;

接下来，一个将时间格式化为mm:ss ...格式的辅助方法：

function timeString (seconds) {
  var minutes = parseInt(seconds / 60) + "",
      seconds = parseInt(seconds % 60) + "";
  if (minutes.length === 1)
    minutes = "0" + minutes;
  if (seconds.length === 1)
    seconds = "0" + seconds;
  return minutes + ":" + seconds;
}

三、加号和减号按钮的事件监听器：

// Event Listeners
addBreakButton.addEventListener("click", function () {
  breakLength += 1 * 60;
  breakTimer.innerHTML = timeString(breakLength);
});

subBreakButton.addEventListener("click", function () {
  breakLength -= 1 * 60;
  if (breakLength < 0)
    breakLength = 0;
  breakTimer.innerHTML = timeString(breakLength);
});

addSessionButton.addEventListener("click", function () {
  sessionLength += 1 * 60;
  sessionTimer.innerHTML = timeString(sessionLength);
});

subSessionButton.addEventListener("click", function () {
  sessionLength -= 1 * 60;
  if (sessionLength < 0)
    sessionLength = 0;
  sessionTimer.innerHTML = timeString(sessionLength);
});

还有，有趣的部分：

// Timer
var myTimer;

function startTimer () {
  if (myTimer) // Check to see if a timer was already running, and if so, stop it
    stopTimer();
  sessionTimeLeft = sessionLength;
  myTimer = setInterval(function () {
    sessionTimeLeft--;
    if (sessionTimeLeft <= 0) {
      sessionTimeLeft = 0;
      stopTimer();
    }
    clockTimer.innerHTML = (sessionTimeLeft <= 0? "Break!": timeString(sessionTimeLeft));
  }, 1000);
}

function stopTimer () {
  clearInterval(myTimer);
  myTimer = 0;
}

最后，包装器：

// Start Timer
function go() {
  startTimer();
}

//Pause Timer
function stop() {
  stopTimer();
}

Codepen：http://codepen.io/anon/pen/ZQjLZE?editors=1010