添加計時器的啓動，停止，重置按鈕

Question

我有這個計時計時器代碼，並希望添加開始，停止和重置按鈕。它始於頁面加載。

<script type="text/javascript"> 
    var timerVar = setInterval(countTimer, 1000); 
    var totalSeconds = 0; 

    function countTimer() { 
     ++totalSeconds; 
     var hour = Math.floor(totalSeconds /3600); 
     var minute = Math.floor((totalSeconds - hour*3600)/60); 
     var seconds = totalSeconds - (hour*3600 + minute*60); 

     document.getElementById("hour").innerHTML =hour; 
     document.getElementById("minute").innerHTML =minute; 
     document.getElementById("seconds").innerHTML =seconds; 
    } 
</script> 

Answer 1

這只是一些簡單的操作hour,minute和seconds並利用clearInterval和setInterval。在我的snipper中，reset不會停止計時器，但通過幾行代碼很容易實現。

window.onload =() => { 
 
    let hour = 0; 
 
    let minute = 0; 
 
    let seconds = 0; 
 
    let totalSeconds = 0; 
 
    
 
    let intervalId = null; 
 
    
 
    function startTimer() { 
 
    ++totalSeconds; 
 
    hour = Math.floor(totalSeconds /3600); 
 
    minute = Math.floor((totalSeconds - hour*3600)/60); 
 
    seconds = totalSeconds - (hour*3600 + minute*60); 
 

 
    document.getElementById("hour").innerHTML =hour; 
 
    document.getElementById("minute").innerHTML =minute; 
 
    document.getElementById("seconds").innerHTML =seconds; 
 
    } 
 

 
    document.getElementById('start-btn').addEventListener('click',() => { 
 
    intervalId = setInterval(startTimer, 1000); 
 
    }) 
 
    
 
    document.getElementById('stop-btn').addEventListener('click',() => { 
 
    if (intervalId) 
 
     clearInterval(intervalId); 
 
    }); 
 
    
 
    
 
    document.getElementById('reset-btn').addEventListener('click',() => { 
 
    totalSeconds = 0; 
 
    document.getElementById("hour").innerHTML = '0'; 
 
    document.getElementById("minute").innerHTML = '0'; 
 
    document.getElementById("seconds").innerHTML = '0'; 
 
    }); 
 
}

<div>Hour: <span id="hour"></span></div> 
 
<div>Minute: <span id="minute"></span></div> 
 
<div>Second: <span id="seconds"></span></div> 
 

 
<button id="start-btn">Start</button> 
 
<button id="stop-btn">Stop</button> 
 
<button id="reset-btn">Reset</button>

Answer 2

重複的Adding start, stop, and reset buttons for a timer

，但只是因爲沒有HTML部分，有完整的答案（HTML + JS感謝@closure）

(function() { 
 
    "use strict"; 
 
    var secondsLabel = document.getElementById('seconds'), 
 
    minutesLabel = document.getElementById('minutes'), 
 
    hoursLabel = document.getElementById('hours'), totalSeconds = 0, 
 
    startButton = document.getElementById('start'), 
 
    stopButton = document.getElementById('stop'), 
 
    resetButton = document.getElementById('reset'), timer = null; 
 

 
    startButton.onclick = function() { 
 
    if (!timer) { 
 
     timer = setInterval(setTime, 1000); 
 
    } 
 
    }; 
 

 
    stopButton.onclick = function() { 
 
    if (timer) { 
 
     clearInterval(timer); 
 
     timer = null; 
 
    } 
 
    }; 
 

 
    resetButton.onclick = function() { 
 
    if (timer) { 
 
     totalSeconds = 0; 
 
     stop(); 
 
    } 
 
    }; 
 

 
    function setTime() { 
 
    totalSeconds++; 
 
    secondsLabel.innerHTML = pad(totalSeconds % 60); 
 
    minutesLabel.innerHTML = pad(parseInt(totalSeconds/60)); 
 
    hoursLabel.innerHTML = pad(parseInt(totalSeconds/3600)) 
 
    } 
 

 
    function pad(val) { 
 
    var valString = val + ""; 
 
    if (valString.length < 2) { 
 
     return "0" + valString; 
 
    } else { 
 
     return valString; 
 
    } 
 
    } 
 

 
})();

<p id='seconds'></p> 
 
<p id='minutes'></p> 
 
<p id='hours'></p> 
 

 
<button id='start'>start</button> 
 
<button id='stop'>stop</button> 
 
<button id='reset'>reset</button>

Answer 3

var timerVar = setInterval(countTimer, 1000); 
 
var totalSeconds = 0; 
 

 
function countTimer() { 
 
    ++totalSeconds; 
 
    var hour = Math.floor(totalSeconds/3600); 
 
    var minute = Math.floor((totalSeconds - hour * 3600)/60); 
 
    var seconds = totalSeconds - (hour * 3600 + minute * 60); 
 

 
    document.getElementById("hour").innerHTML = hour; 
 
    document.getElementById("minute").innerHTML = minute; 
 
    document.getElementById("seconds").innerHTML = seconds; 
 
} 
 

 
function tstart() { 
 
    timerVar = setInterval(countTimer, 1000); 
 
} 
 

 
function tpuse() { 
 
    clearInterval(timerVar); 
 
} 
 

 
function treset() { 
 
    totalSeconds = -1; 
 
    countTimer(); 
 
}

<button type="button" onclick="tstart()">start</button> 
 
<button type="button" onclick="tpuse()">puse</button> 
 
<button type="button" onclick="treset()">reset</button> 
 

 
<br> 
 
<span id="hour"></span>:<span id="minute"></span>:<span id="seconds"></span>