Таймер Помодоро становится отрицательным и отсчитывает

#javascript #timer

Вопрос:

У меня есть таймер pomodoro, который должен отсчитывать «рабочие минуты», введенные пользователем, а затем минуты перерыва, а затем цикл. Таймер начинает отсчитывать рабочие минуты, как и должно быть, а затем минуты перерыва(как и должно быть), затем он перезапускается и снова отсчитывает рабочие минуты, как и должно быть, НО когда с этим покончено, он переходит к минутам перерыва во второй раз вместо обратного отсчета, например. 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();  }  }  

Комментарии:

1. это работает нормально, просто измените минуты останова на секунды внутри функции сохранения.

2. не представляйте, что вы можете измерить время только с помощью setInterval. его аргумент задержки является лишь приблизительным

Ответ №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) =gt; {  isStarted = !isStarted;  if (isStarted) {  save();  start();  startButton.textContent = "Stop";  } else {  stop();  startButton.textContent = "Start";  document.getElementById("timer").innerText = 0;  }  }); 
 lt;labelgt;Work Time: lt;input type="number" id="TaskTime" value="1" /gt;lt;/labelgt;  lt;labelgt;Break Time: lt;input type="number" id="BreakTime" value="1" /gt;lt;/labelgt;   lt;div id="timer"gt;0lt;/divgt;  lt;button id="start-btn"gt;Startlt;/buttongt; 

Комментарии:

1. Большое вам спасибо! Теперь все работает так, как задумано. Ничего, если я использую ваши модификации кода в реальном проекте?

2. для такого простого приложения, как это, я не думаю, что возникнет проблема. все нормально.