番茄工作制定时器变为负数并开始计数

Question

我有一个番茄闹钟，用来倒数"工作时间"。用户输入，然后中断分钟，然后循环。计时器开始倒数工作分钟，就像它应该的那样，然后打破分钟(就像它应该的那样)，然后重新开始，像它应该的那样再次倒数工作分钟，但是当它完成后，它会第二次倒数工作分钟，而不是从eg开始倒数。1分钟从-1分钟开始计数，-1分钟，1秒，以此类推。我是一个完全的初学者如果你能记住这一点，那就太好了，任何帮助我都非常感谢。下面是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>