再次感谢大家的帮助。到目前为止,我已经能够在JS中有一个2分钟的计时器。
- 我已经做了一个功能暂停按钮,但是:
- 我想2分钟定时器开始时,我点击我的开始按钮[与事件监听器]。当前正在自动启动。
- 我想让我的开始按钮在按下暂停按钮后恢复我离开的定时器点。
这是我到目前为止的代码。我想我需要使用一个preventDefault或setTimeout事件,但我不太确定。你们所有有帮助的回答真的帮助我变得舒适,建立我的第一个项目,再次感谢你们:)
let paused = false
const startingMinutes = 2
let time = startingMinutes * 60
let timerId = setInterval(countDown, 1000)
function countDown() {
let minutes = Math.floor(time / 60)
let seconds = time % 60
time--
console.log(minutes, 'minutes:', seconds, 'seconds')
if (time <= 0) {
console.log('Time is up!')
clearInterval(timerId)
}
countdown.innerHTML = minutes + ' minutes ' + ': ' + seconds + ' seconds '
}
startBtn.addEventListener('click', countDown)
function pauseGame() {
if (paused === true || !paused === true) {
startBtn.removeEventListener('click', countDown)
clearInterval(timerId)
}
}
pauseBtn.addEventListener('click', () => {
pauseGame()
})
我做了一些改变:
-
当你第一次运行代码时定时器没有运行,所以它应该等于true。
let paused = true
-
让我们把你的初始setInterval放在eventListener中,所以它在点击开始按钮后开始倒计时:
let timerId ; // just initialize the timerId variable, without a value, so you can access it inside your functions startBtn.addEventListener('click', ()=>{ paused=false timerId = setInterval(countDown, 1000) })
-
还编辑了pauseGame函数,不需要从startButton中删除eventListener:
function pauseGame() { paused=true clearInterval(timerId) }
-
一个修复!如果我们连续点击开始按钮,新的时间间隔将被浏览器执行,使剩余的时间比需要的时间更早结束,我们可以通过检查计时器是否已经运行来防止这种情况
startBtn.addEventListener('click', ()=>{ if (paused===false) {return;} paused = false timerId = setInterval(countDown, 1000) })