<html>
<head>
<meta charset="utf-8">
<title>计时器</title>
<style>
#oT {
width: 400px;
height: 200px;
background-color: #000;
margin: 0 auto;
color: #fff;
font-size: 90px;
text-align: center;
line-height: 200px;
font-weight: 400;
}
#start {
width: 50px;
height: 30px;
font-size: 18px;
margin: 10px auto;
display: block;
}
</style>
</head>
<body>
<div id="oT">00:00:00</div>
<button id="start" onclick="timesGo()">start</button>
<script>
var interval, reg = /^\d$/,
sleep = 1000,
sum = 0;
var timesGo = function() {
if (!interval) {
interval = setInterval(function() {
sum++;
var d = new Date("1111/1/1,0:0:0");
d.setSeconds(sum);
var h = d.getHours();
h = reg.test(h) ? "0" + h + ":" : h + ":"
var m = d.getMinutes();
m = reg.test(m) ? "0" + m + ":" : m + ":"
var s = d.getSeconds();
s = reg.test(s) ? "0" + s : s;
document.querySelector('#oT').innerHTML = h + m + s;
}, sleep);
} else {
clearInterval(interval);
interval = null;
}
}
</script>
</body>
</html>
