#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. для такого простого приложения, как это, я не думаю, что возникнет проблема. все нормально.