<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时分秒计时器</title>
<script>
// 初始值
var flag=true;
var h=m=s=0;
var Init;
function timers(){
s=s+1;
if(s>=60){
s=00;
m=m+1
}
if(m>=60){
m=00;
h=h+1;
}
//两种表现形式
document.getElementById(\'timetext\').value= `${h<10?(\'0\'+h):h}时${m<10?(\'0\'+m):m}分${s<10?(\'0\'+s):s}秒`;
document.getElementById(\'_h\').innerHTML=`${h<10?(\'0\' + h):h}时`
document.getElementById(\'_m\').innerHTML=`${m<10?(\'0\' + m):m}分`
document.getElementById(\'_s\').innerHTML=`${s<10?(\'0\' + s):s}秒`
}
// 开始计时器
function start(){
if(flag){
init = setInterval(timers,1000)
}
flag=false
}
// 重置计时器
function Reset(){
flag=true
window.clearInterval(init)
h=m=s=0;
document.getElementById(\'timetext\').value= "00时00分00秒";
document.getElementById(\'_h\').innerHTML=\'00时\'
document.getElementById(\'_m\').innerHTML=\'00分\'
document.getElementById(\'_s\').innerHTML=\'00秒\'
}
// 暂停计时器
function stop(){
flag=true
window.clearInterval(init)
}
</script>
</head>
<body>
<div style="text-align: center">
<input type="text" id="timetext" value="00时00分00秒" readonly><br>
<span id="_h">00时</span>
<span id="_m">00分</span>
<span id="_s">00秒</span>
<button type="button" onclick="start()">开始</button> <button type="button" onclick="stop()">暂停</button> <button type="button" onclick="Reset()">重置</button>
</div>
</body>
</html>