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

我正在根据用户输入创建一个倒计时计时器。当用户暂停并恢复时，计时器将以初始输入值重新启动，并且无法从当前间隔恢复。我已经把代码上传到代码笔里了。

//计时器
var-myTimer；
var持续时间=会话计数器*60；
var startTimer=函数（）{
分钟=parseInt（持续时间/60）；
秒=parseInt（持续时间%60）；
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
document.getElementById（“时钟计时器”）.innerHTML=minutes+“：”+seconds；
如果（--持续时间<0）{
document.getElementById（“toggleStatus”）.innerHTML=“
中断！”；
}
};
//启动计时器
var go=函数（）{
myTimer=setInterval（起始计时器，1000）；
document.getElementById（'start'）.innerHTML=“Stop”；
document.getElementById（'start'）.className=“btn btn danger”；
document.getElementById（“开始”）.onclick=stop；
};
//停止计时器
var stop=函数（）{
清除间隔（myTimer）；
document.getElementById（'start'）.innerHTML=“start”；
document.getElementById（'start'）.className=“btn btn success”；
document.getElementById（“开始”）.onclick=go；
};
duration.onload=stop（）；

您正在从

#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

）：

接下来，一个助手方法将时间格式化为

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

---

代码笔：

@Harchet好东西！谢谢你把这些都打出来。我解决了原来的问题，但又碰到了另一个问题。我无法使计时器初始化为用户输入。请随意提问。

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