开始倒计时点击并恢复- Javascript



再次感谢大家的帮助。到目前为止,我已经能够在JS中有一个2分钟的计时器。

  • 我已经做了一个功能暂停按钮,但是:
  1. 我想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()
})

我做了一些改变:

  1. 当你第一次运行代码时定时器没有运行,所以它应该等于true。

    let paused = true
    
  2. 让我们把你的初始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)
    })
    
  3. 还编辑了pauseGame函数,不需要从startButton中删除eventListener:

    function pauseGame() {
    paused=true
    clearInterval(timerId)
    }
    
  4. 一个修复!如果我们连续点击开始按钮,新的时间间隔将被浏览器执行,使剩余的时间比需要的时间更早结束,我们可以通过检查计时器是否已经运行来防止这种情况

    startBtn.addEventListener('click', ()=>{
    if (paused===false) {return;}
    paused = false
    timerId = setInterval(countDown, 1000)
    })
    

相关内容

  • 没有找到相关文章

最新更新