Javascript 添加定时器的启动、停止、复位按钮

我有这个计数计时器代码，想添加开始，停止和复位按钮。它从页面加载开始

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

var timerVar=设置间隔（计数计时器，1000）；
var totalSeconds=0；
函数countTimer（）{
++总秒数；
var小时=数学楼层（总秒数/3600）；
var分钟=数学地板（（总秒-小时*3600）/60）；
var秒数=总秒数-（小时*3600+分钟*60）；
document.getElementById（“hour”）.innerHTML=hour；
document.getElementById（“分钟”）.innerHTML=minute；
document.getElementById（“秒”）.innerHTML=seconds；
}

副本

但是仅仅因为没有HTML部分，就有了完整的答案（HTML+js感谢@closure）

（函数（）{
“严格使用”；
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=函数（）{
如果（！计时器）{
定时器=设置间隔（设置时间，1000）；
}
};
stopButton.onclick=函数（）{
中频（定时器）{
清除间隔（计时器）；
定时器=空；
}
};
resetButton.onclick=函数（）{
中频（定时器）{
总秒数=0；
停止（）；
}
};
函数setTime（）{
totalSeconds++；
secondsLabel.innerHTML=pad（总秒数%60）；
minutesLabel.innerHTML=pad（parseInt（totalSeconds/60））；
hoursLabel.innerHTML=pad（parseInt（totalSeconds/3600））
}
功能板（val）{
var valString=val+“”；
如果（valString.length<2）{
返回“0”+valString；
}否则{
返回valString；
}
}
})();



开始
停止
重置
只需简单操作
小时
、
分钟
和
秒
，并利用
清除间隔
和
设置间隔
。在我的snipper中，
reset
不会停止计时器，但只需几行代码就可以轻松实现


window.onload=（）=>{
设小时=0；
设分钟=0；
设秒=0；
让totalSeconds=0；
设intervalId=null；
函数startTimer（）{
++总秒数；
小时=数学楼层（总秒数/3600）；
分钟=数学地板（（总秒-小时*3600）/60）；
秒=总秒-（小时*3600+分钟*60）；
document.getElementById（“hour”）.innerHTML=hour；
document.getElementById（“分钟”）.innerHTML=minute；
document.getElementById（“秒”）.innerHTML=seconds；
}
document.getElementById（'start-btn'）。addEventListener（'click'，（）=>{
intervalId=setInterval（起始时间，1000）；
})
document.getElementById（'stop-btn'）。addEventListener（'click'，（）=>{
如果（有效期内）
clearInterval（intervalId）；
});
document.getElementById（'reset-btn'）。addEventListener（'click'，（）=>{
总秒数=0；
document.getElementById（“hour”）.innerHTML='0'；
document.getElementById（“分钟”）.innerHTML='0'；
document.getElementById（“秒”）.innerHTML='0'；
});
}
小时：
分钟：
第二：
开始
停止
重置
//DOM缓存
const startBtn=document.querySelector（“启动btn”）
const stopBtn=document.querySelector（“#stop btn”）
const resetBtn=document.querySelector（“reset btn”）
var minDigits=document.getElementById（“min”）；
var secDigits=document.getElementById（“sec”）；
//初始化变量
var-hrs=0；
var-mins=0；
var-secs=0；
var countSec=0；
var timerVar=null；
//功能=============
函数startCounter（）{
++countSec；
hrs=数学楼层（计数秒/3600）；
分钟=数学楼层（（计数秒-小时*3600）/60）；
秒=秒数-（小时*3600+分钟*60）；
如果（秒<10）{
secDigits.innerHTML=“0”+秒；
}else{secDigits.innerHTML=secs；}
minDigits.innerHTML=“0”+分钟；
}
startBtn.addEventListener（'单击'，（）=>{
timerVar=设置间隔（startCounter，1000）；
})
stopBtn.addEventListener（'单击'，（）=>{
中频（定时器）
清除间隔（定时器）；
});
resetBtn.addEventListener（'单击'，（）=>{
countSec=0；
secDigits.innerHTML=“00”；
minDigits.innerHTML=“00”；
清除间隔（定时器）；
});

时钟JS
简易计数器
在一个没有时间检查的时间

00:00
开始
停止
重置
你能告诉我们你添加按钮的尝试吗？可能重复的？也许你想将问题标记为可能重复？@KryptoNeko9我很高兴能提供帮助，如果你也能接受我的答案，我将非常感激。该示例非常有效，而且非常容易理解！非常感谢。