为什么不'我的定时器功能倒计时

Why doesn't my timer function count down?

本文关键字：定时器 功能 倒计时 我的 为什么不      更新时间：2023-09-26

我正在进行一个创建pomodoro时钟的个人项目。我开始尝试创建一个带有启动和停止按钮的25分钟倒计时计时器。我包含了一个计时器函数，它应该每1000毫秒倒计时一次我的变量，但它不起作用。这是我的HTML:

Pomodoro时钟

<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);
}

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

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

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

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

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

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

您需要在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>

试试这个

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

您只在脚本开始时设置innerHTML一次。每次运行函数时都需要执行此操作。

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

您需要在interval函数中更新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>

相关文章：