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

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

试试这个

var i = 25; 

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

Answer 2

你只设置innerHTML一次，在脚本的开始。每次你的函数运行时都需要这样做。

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

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

Answer 3

您需要更新innerHTML的setInterval()回调里面。您也可以使用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>

Answer 4

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

这里i电流值被分配给innerHTML。这不是通过引用传递的。

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

您需要的i新的值赋给innerHTML您区间的每一次迭代：

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

Answer 5

您需要更新间隔函数内的股利。

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>