番茄钟计时器变为负数并开始计数

Question

我有一个番茄钟计时器，它应该倒计时用户输入的“工作时间”，然后是休息时间，然后循环。计时器开始像它应该的那样倒计时 WorkMinutes，然后中断分钟（就像它应该的那样），然后它重新启动并再次倒计时工作分钟，就像它应该的那样但是当它完成时它会第二次进入中断分钟而不是计数从例如。 1 分钟从 -1 分钟开始计算，所以 -1 分 1 秒，依此类推。我是 JavaScript 中的 完全初学者 ，所以如果您能记住这一点，那将是非常好的，我非常感谢任何帮助。这是 JavaScript 代码：

  // we need some variables to store the work and break minutes 
  var workSeconds = "120", breakSeconds = "60";
  // and a referens to interval
  var xInterval;

  var audio = new Audio('Bell_finished.mp3');

  // start function
  function start() {          
      xInterval = setInterval(workCountDown, 1000);
  }
  // stop function
  function stop() {
      clearInterval(xInterval);
  }
  // reset function; calls stop, save which re-stores the values of user inputs and then starts again.
  function reset() {
      stop();
      save();
      start();
  }
  // save function that saves the values of user inputs
  function save() {
      workSeconds = parseInt(document.getElementById("TaskTime").value)*60;
      breakMinutes = parseInt(document.getElementById("BreakTime").value)*60;           
  }
  
  // working count down function
  function workCountDown() {
      // counting down work seconds
      workSeconds--;
      // showing work seconds in "0:0" format: 
      document.getElementById("timer").innerText = Math.floor((workSeconds / 60)).toString() + ":" + (workSeconds % 60).toString();
      
      // if workSeconds reaches to zero, stops the workInterval and starts the breakInterval:
      if (workSeconds == 0) {
          audio.play();
          console.log("relaxing...");
          clearInterval(xInterval);
          xInterval = setInterval(breakCountDown, 1000);
      }
  }
  
  // breaking count down function
  function breakCountDown() {
      // counting down break seconds
      breakSeconds--;
      // showing break seconds in "0:0" format: 
      document.getElementById("timer").innerText = Math.floor((breakSeconds / 60)).toString() + ":" + (breakSeconds % 60).toString();
      
      // if breakSeconds reaches to zero, stops the breakInterval, resets the variables to initial values by calling save function and starts the workInterval again:
      if (breakSeconds == 0) {
          audio.play();
          console.log("ready to work...");
          reset();
      }
  }

Answer 1

正如我在评论中所说，它工作正常，只需在保存功能中将 breakMinutes 更改为 breakSeconds 即可。这是您的代码的实现。您可以运行此处的代码段并查看结果

// we need some variables to store the work and break minutes
      let workSeconds = "120",
        breakSeconds = "60";
      // and a referens to interval
      let xInterval;
      let isStarted = false;

      // start function
      function start() {
        xInterval = setInterval(workCountDown, 1000);
      }
      // stop function
      function stop() {
        clearInterval(xInterval);
      }
      // reset function; calls stop, save which re-stores the values of user inputs and then starts again.
      function reset() {
        stop();
        save();
        start();
      }
      // save function that saves the values of user inputs
      function save() {
        workSeconds =
          parseInt(document.getElementById("TaskTime").value || 120, 10) * 60;
        breakSeconds =
          parseInt(document.getElementById("BreakTime").value || 60, 10) * 60;
      }

      // working count down function
      function workCountDown() {
        // counting down work seconds
        workSeconds--;
        // showing work seconds in "0:0" format:
        document.getElementById("timer").innerText =
          Math.floor(workSeconds / 60).toString() +
          ":" +
          (workSeconds % 60).toString();

        // if workSeconds reaches to zero, stops the workInterval and starts the breakInterval:
        if (workSeconds === 0) {
          console.log("relaxing...");
          clearInterval(xInterval);
          xInterval = setInterval(breakCountDown, 1000);
        }
      }

      // breaking count down function
      function breakCountDown() {
        // counting down break seconds
        breakSeconds--;
        // showing break seconds in "0:0" format:
        document.getElementById("timer").innerText =
          Math.floor(breakSeconds / 60).toString() +
          ":" +
          (breakSeconds % 60).toString();

        // if breakSeconds reaches to zero, stops the breakInterval, resets the variables to initial values by calling save function and starts the workInterval again:
        if (breakSeconds === 0) {
          console.log("ready to work...");
          reset();
        }
      }

      const startButton = document.getElementById("start-btn");

      startButton.addEventListener("click", (e) => {
        isStarted = !isStarted;
        if (isStarted) {
          save();
          start();
          startButton.textContent = "Stop";
        } else {
          stop();
          startButton.textContent = "Start";
          document.getElementById("timer").innerText = 0;
        }
      });

    <label>Work Time: <input type="number" id="TaskTime" value="1" /></label>
    <label>Break Time: <input type="number" id="BreakTime" value="1" /></label>

    <div id="timer">0</div>
    <button id="start-btn">Start</button>

番茄钟计时器变为负数并开始计数

Pomodoro Timer goes negative and counts up

javascript

timer