html 按下按钮时是否重置倒计时计时器?

vhmi4jdf  于 2023-04-10  发布在  其他
关注(0)|答案(5)|浏览(169)

我有一个按钮,当按下计时器开始倒计时。我很难弄清楚如何重置倒计时计时计时器,一旦同一按钮被按下。
我也在想为什么我的时间停在0:1?

let startingCount = 5
let time = startingCount * 60
let spaceForTime = document.getElementById('countdown')

let myTimer = null

function timer() {

  if (myTimer !== null) {
    clearInterval(myTimer)
  }

  myTimer = setInterval(function timer() {
    let seconds = time % 60
    let minutes = Math.floor(time / 60)
    seconds = seconds < 10 ? '0' + seconds : seconds
    time--;
    if (time >= 0) {
      spaceForTime.innerHTML = `${minutes}:${seconds}`

    } else if (time === 0) {
      spaceForTime.innerText = "Move onto the next question!"
      clearInterval(time)
    }
  }, 1000);
}
<div id="button">
  <button onclick="timer()" id="letsChat">Let's Chat!</button>
</div>
<span id="countdown"></span>
des4xlb0

des4xlb01#

在你的计时器函数中添加一个检查来查看计时器是否已经在运行。如果是,在再次启动计时器之前,清除间隔并将时间重置为它的起始值

let startingCount = 5
let time = startingCount * 60
let spaceForTime = document.getElementById('countdown')
let myTimer = null

function timer() {
  if (myTimer !== null) {
    clearInterval(myTimer)
    time = startingCount * 60
  }

  myTimer = setInterval(function() {
    let seconds = time % 60
    let minutes = Math.floor(time / 60)
    seconds = seconds < 10 ? '0' + seconds : seconds

    if (time >= 0) {
      spaceForTime.innerHTML = `${minutes}:${seconds}`
      time--;

    } else {
      spaceForTime.innerText = "Move onto the next question!"
      clearInterval(myTimer)
    }
  }, 1000)
}
pinkon5k

pinkon5k2#

你必须在代码中修改它:

let startingCount = 5
let time = startingCount * 60
let spaceForTime = document.getElementById('countdown')

let myTimer = null

function timer() {
 startingCount = 5;<---------
 if (myTimer !== null) {
   clearInterval(myTimer)
 }

myTimer = setInterval(function timer() {
let seconds = time % 60
let minutes = Math.floor(time / 60)
seconds = seconds < 10 ? '0' + seconds : seconds
time--;
if (time >= 0) {
  spaceForTime.innerHTML = `${minutes}:${seconds}`

} else{ <---------
  spaceForTime.innerText = "Move onto the next question!"
  clearInterval(time)
}
}, 1000);
}
bvuwiixz

bvuwiixz3#

您需要在清除timer()中的前一个间隔后重新声明startingCounttime变量。

let startingCount = 5
let time = 0 // set this inside timer()
let spaceForTime = document.getElementById('countdown')

let myTimer = null

function timer() {

  if (myTimer !== null) {
    clearInterval(myTimer)
  }
  
  time = startingCount * 60 // initialize the time here

  myTimer = setInterval(function timer() {
    let seconds = time % 60
    let minutes = Math.floor(time / 60)
    seconds = seconds < 10 ? '0' + seconds : seconds
    time--;
    if (time >= 0) {
      spaceForTime.innerText = `${minutes}:${seconds}`
    } else {
      spaceForTime.innerText = "Move onto the next question!"
      clearInterval(time)
    }
  }, 1000);
}
<div id="button">
  <button onclick="timer()" id="letsChat">Let's Chat!</button>
</div>
<span id="countdown"></span>
mzmfm0qo

mzmfm0qo4#

计时器在0:01停止的原因是,首先设置minutesseconds变量,然后减少time。在设置minutesseconds变量之前,需要减少时间。

a8jjtwal

a8jjtwal5#

需要考虑的几点:
首先,计时器没有重置,因为您没有重置time的值(正如其他人提到的那样)。
第二,它在0:01停止的原因是因为time--在if条件之前,所以条件在迭代中计算time == -1,它应该显示0秒。执行是:

--> currently showing 0:01.
--> new seconds calculated to be 00
--> time-- results in time = -1
--> condition fails since time < 0
--> does not show updated seconds

要解决这个问题,请将time--移动到interval函数的末尾(也就是if条件之后)。
第三,你的else if条件永远不会被访问,因为你把>=放在了if条件中。它应该被修改为更大的>
具有上述更改的代码:

let startingCount = .1;
let time = startingCount * 60;
let spaceForTime = document.getElementById('countdown');

let myTimer = null;

function timer() {

  if (myTimer !== null) {
    clearInterval(myTimer);
    time = startingCount * 60;
  }

  myTimer = setInterval(function timer() {
    let seconds = time % 60;
    let minutes = Math.floor(time / 60);
    seconds = seconds < 10 ? '0' + seconds : seconds;
    if (time > 0) {
      spaceForTime.innerHTML = `${minutes}:${seconds}`;

    } else if (time === 0) {
      spaceForTime.innerText = "Move onto the next question!";
      clearInterval(time);
    }
    time--;
  }, 1000);
}
<div id="button">
  <button onclick="timer()" id="letsChat">Let's Chat!</button>
</div>
<span id="countdown"></span>

注:缩短时间为6秒,演示更快

相关问题