使用javascript在0处停止计时器答案

【问题标题】：stop timer at 0 with javascript使用javascript在0处停止计时器
【发布时间】：2023-01-09 20:56:48
【问题描述】：

我设置了一个从 20 到 0 的 setinterval。当计数器小于或等于 10 时，我希望文本变为红色（这有效）但是当它达到 0 时，我希望计数器停止减少，但它没有。我究竟做错了什么？

`let timerCount = document.querySelector('.imposters__voting span')
let counter = 20; 
setInterval(function(){
    if (counter > 11){
        counter--; 
    } else if(counter <= 10){
        counter--;
        document.querySelector('.imposters__voting').style.color = 'red'
    } else if(counter = 0){
        document.querySelector('.imposters__voting').style.color = 'red'
        document.querySelector('.imposters__voting').innerText = 'Voting has ended'
    }
    timerCount.innerText = counter

}, 1000)`

我试过 counter = 0 但它没有用

【问题讨论】：

1st du if (counter > 11) { ... } else if (counter <= 10) { ... } 已经有两个条件总是匹配。因此，即使是像 if (counter 这样正确编写的第三个子句===0) { ... } 永远联系不上。因此第二名尽管 OP 可以写（反=0) 并且它是一个有效的表达式，此表达式不会将 counter 与零进行比较，而是将零值分配给 counter。

标签： javascript html setinterval

【解决方案1】：

尝试使用 == 或 === 比较运算符。

if (counter == 0)

在这里了解 JS 运算符：https://www.w3schools.com/js/js_operators.asp

【讨论】：

当我这样做时它仍然倒计时低于 0

【解决方案2】：

当计时器达到 0 时，它会按照您指定的方式更改其颜色和内部文本。但是一旦计时器低于 0，counter <= 10 就会被触发并再次减少计数器。

您需要通过将第二个 if 语句设置为在计数器小于 10 且大于 0 时工作来限制循环。您还需要通过在计数器等于 0 时声明 return 语句来停止循环。

let timerCount = document.querySelector('.imposters__voting span')
let counter = 20; 
setInterval(function(){
    if (counter > 11){
        counter--; 
    } else if(counter <= 10 && counter > 0){
        counter--;
        document.querySelector('.imposters__voting').style.color = 'red'
    } else {
        document.querySelector('.imposters__voting').style.color = 'red'
        document.querySelector('.imposters__voting').innerText = 'Voting has ended'
        return
    }
    timerCount.innerText = counter

}, 1000)`

【讨论】：

【解决方案3】：

您需要清除间隔，否则它会继续每 1 秒执行一次：

let timerCount = document.querySelector('.imposters__voting span')
let counter = 20; 
let interval = setInterval(function(){
    if (counter > 11){
        counter--; 
    } else if(counter <= 10){
        counter--;
        document.querySelector('.imposters__voting').style.color = 'red'
    } else if(counter = 0){
        document.querySelector('.imposters__voting').style.color = 'red'
        document.querySelector('.imposters__voting').innerText = 'Voting has ended';
clearInterval(interval);
    }
    timerCount.innerText = counter

}, 1000

【讨论】：