番茄钟

Question

我正在制作个人项目来制作番茄钟。我开始尝试使用启动和停止按钮创建一个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);
}

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

此处i的当前值已分配给innerHTML。它没有通过引用传递。

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

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

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

Answer 3

试试这个

var i = 25;

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

Answer 4

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

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

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

Answer 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>

为什么我的计时器功能倒计时？

番茄钟

5 个答案: