我一直在进行免费代码训练营的25 + 5时钟挑战,其中6项测试一直失败,结果仍然相同,说“计时器未达到00:00”,但确实成功了当我看着它倒数时为零。这个版本是用香草JS完成的,我现在看到在React中可能会更好。有什么想法吗?
这是我的CodePen:https://codepen.io/mplatt212/pen/OJNxJJr
以下是最相关的JS:
const reset = document.querySelector('#reset');
const startStop = document.querySelector('#start_stop');
const breakLabel = document.querySelector('#break-label');
var breakLength = document.querySelector('#break-length');
const breakDown = document.querySelector('#break-decrement');
const breakUp = document.querySelector('#break-increment');
const sessionLabel = document.querySelector('#session-label');
const sessionLength = document.querySelector('#session-length');
const sessionDown = document.querySelector('#session-decrement');
const sessionUp = document.querySelector('#session-increment');
var timerLabel = document.querySelector('#timer-label');
var timeLeft = document.querySelector('#time-left');
var beep = document.querySelector('#beep');
var toggle = false;
breakLength.innerHTML = '5';
sessionLength.innerHTML = '25';
timeLeft.innerHTML = '25:00';
var timer = (parseInt(timeLeft.innerHTML.split(':')[0]) * 60 * 1000) + (parseInt(timeLeft.innerHTML.split(':')[1]) * 1000);
breakTimer = () => {
let breakTime = parseInt(breakLength.innerHTML) * 60 * 1000;
let breakInterval = setInterval(() => {
if(breakTime == 0){
timer = parseInt(sessionLength.innerHTML) * 60 * 1000;
timerStart();
timerLabel.innerHTML = 'Session';
clearInterval(breakInterval);
//beep.play();
}
if(toggle){
timeLeft.innerHTML = msToTime(breakTime);
breakTime -= 1000;
} else {
clearInterval(breakInterval);
return;
}
}, 1000)
}
timerStart = () => {
let sessionInterval = setInterval(() => {
if(timer == 0){
breakTimer();
timerLabel.innerHTML = 'Break';
clearInterval(sessionInterval);
beep.play();
return;
}
if(toggle){
timer -= 1000;
timeLeft.innerHTML = msToTime(timer);
} else {
clearInterval(sessionInterval);
return;
}
}, 1000)
};
如果您需要进一步说明,请告诉我。谢谢您的时间。