实现效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{width: 110px;height: 200px;padding: 50px;background-color: orange;border: 1px solid black;margin: 50px auto 0;}
#div1 span{font-size: 22px;}
#div1 button{width: 100px;height: 30px;font-size: 16px;margin-top: 20px;background-color: black;color: orange;}
</style>
<script>
function $(id){
return document.getElementById(id);
}
var i=0;
var timer=null;
window.onload=function(){
$("start").onclick=function(){
timer=setInterval(function(){
i++;
$("sec").innerHTML=double(i%60);
$("min").innerHTML=double(parseInt(i/60)%60);
$("hour").innerHTML=double(parseInt(i/3600));
},1000);
}
$("pause").onclick=function(){
clearInterval(timer);
}
$("reset").onclick=function(){
clearInterval(timer);
i=0;
$("sec").innerHTML="00";
$("min").innerHTML="00";
$("hour").innerHTML="00";
}
}
function double(n){
if(n<10){
return "0"+n;
}else{
return n;
}
}
</script>
</head>
<body>
<div id="div1">
<span id="hour">00</span>
<span>:</span>
<span id="min">00</span>
<span>:</span>
<span id="sec">00</span>
<br>
<button id="start">开始</button>
<button id="pause">暂停</button>
<button id="reset">复位</button>
</div>
</body>
</html>