<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{width: 150px ;
height: 200px ;
padding: 50px ;
background-color: orange ;
border: 1px solid black;
text-align:center ;
margin-left:auto;
margin-right:auto;
}
#div1 span{
font-size: 22px;
}
#div1 button{
width: 100px ;
height: 30px ;
font-size: 16px;
margin-top: 20px ;
background-color: black ;color: aliceblue ;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
var i = 0;
var timer = null;
var isRunning = false;
window.onload = function(){
function startFunc(){
timer = setInterval(function(){
i++;
$("sec").innerHTML = doubletime(i % 60);
$("min").innerHTML = doubletime(parseInt( i / 60 ) % 60 );
$("hour").innerHTML = doubletime(parseInt( i / 3600 ));
},1000);
}
function pauseFunc(){
clearInterval(timer);
}
$("btn1").onclick = function(){
if(!isRunning){
$("btn1").innerHTML = '暂停'
isRunning = true;
startFunc();
}else{
$("btn1").innerHTML = '开始'
isRunning = false;
pauseFunc();
}
}
$("reset").onclick = function(){
clearInterval(timer);
i = 0;
isRunning = false;
$("btn1").innerHTML = '开始'
$("sec").innerHTML = "00";
$("min").innerHTML = "00";
$("hour").innerHTML = "00";
}
}
function doubletime(n){
if (n <= 9){
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 = 'btn1'>开始</button>
<button id = 'reset'>复位</button>
</div>
</body>
</html>