【问题标题】：Why doesn't my timer function count down?为什么我的定时器功能不倒计时？
【发布时间】：2015-11-07 02:18:34
【问题描述】：

我正在做一个创建番茄钟的个人项目。我首先尝试创建一个带有开始和停止按钮的 25 分钟倒计时计时器。我已经包含了一个计时器函数，它应该每 1000 毫秒对我的变量进行倒计时，但它不起作用。这是我的 HTML：

番茄钟

<div id="timer" class="circle">Timer</div>
<button onclick="setTimeout(timer, 1000);">Start</button>
<button>Stop</button>

Javascript：

var i = 25;
document.getElementById("timer").innerHTML = i;

function timer(){ 
  setInterval(function(){i--}, 1000);
}

我猜这可能与我的计时器功能有关？

【问题讨论】：

Protip：你没有改变任何HTML，所以不要使用innerHTML，使用textContent

标签： javascript timer

【解决方案1】：

document.getElementById("timer").innerHTML = i;

这里i 的当前值被分配给innerHTML。它不是通过引用传递的。

JavaScript 中唯一通过引用传递的数据类型是对象（普通对象、函数、数组等）。

您需要在间隔的每次迭代中将 i 的新值分配给 innerHTML：

setInterval(function(){
    i--;
    document.getElementById("timer").innerHTML = i;
}, 1000);

【讨论】：

【解决方案2】：

您需要更新 setInterval() 回调中的 innerHTML。您也可以使用 clearInterval() 清除间隔。我刚刚删除了 setTimeout() ，因为 setInterval() 在延迟之后开始。

var i = 25,
  ele = document.getElementById("timer");
ele.innerHTML = i, inter;

function timer() {
  inter = setInterval(function() {
    ele.innerHTML = --i;
    if (i == 0) clearInterval(inter);
  }, 1000);
}

function stop() {
  clearInterval(inter);
}

<div id="timer" class="circle">Timer</div>
<button onclick="timer()">Start</button>
<button onclick="stop()">Stop</button>

【讨论】：

【解决方案3】：

试试这个

var i = 25;

function timer(){ 
  setInterval(function(){
    i--;
    document.getElementById("timer").innerHTML = i;
  }, 1000);
}

【讨论】：

你必须用这行代码更新你的HTML页面document.getElementById("timer").innerHTML = i;

【解决方案4】：

您只需在脚本开头设置一次innerHTML。每次运行函数时都需要这样做。

document.getElementById("timer").innerHTML = i;

function timer(){
    setInterval(function(){
        i--;
        document.getElementById("timer").innerHTML = i;
    }, 1000);
}

【讨论】：

【解决方案5】：

你需要更新区间函数里面的div。

var i = 25;
var timerDiv = document.getElementById("timer");

function timer() {
  setInterval(function() {
    timerDiv.innerHTML = i--;
  }, 1000);
}

.circle {
  background-color: red;
  color: white;
  border-radius: 20px;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  font-weight: bold;
  font-family: sans-serif;
  line-height: 40px;
}

<div id="timer" class="circle">Timer</div>
<button onclick="setTimeout(timer, 1000);">Start</button>
<button>Stop</button>

【讨论】：