爲什麼我的計時器功能不能倒計時？

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>