<!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>
#box {
width: 110px;
/* border: solid 1px red; */
margin: 0 auto;
padding: 10px 5px;
overflow: hidden;
}
#box>span{
width: 20px;
text-align: center;
font-size: 21px;
float: left;
}
</style>
</head>
<body>
<div id="box">
<span id="hour">00</span>
<span>:</span>
<span id="miu">00</span>
<span>:</span>
<span id="sec">00</span>
</div>
<button id="stop">停止时间</button>
</body>
</html>
<script>
function two(_obj){
return ('00'+_obj).substring(('00'+_obj).length-2,('00'+_obj).length)
}
var taskId2 = setInterval(function () {
var dt = new Date();
var h = dt.getHours()
var m = dt.getMinutes()
var s = dt.getSeconds()
document.getElementById('hour').innerText = two(h);
document.getElementById('miu').innerText =two(m);
document.getElementById('sec').innerText = two(s);
}, 1000);
var stop = document.getElementById('stop');
stop.onclick = function () {
//停止定时器的进程
clearInterval(taskId2)
}
</script>
