样式
<style>.dahe {width: 300px;height: 400px;margin: auto;background-color: pink;}.shijian {color: white;font-size: 40px;text-align: center;line-height: 80px;}.anniu {width: 250px;margin: auto;}button {width: 250px;font-size: 30px;margin-top: 20px;}</style>
HTML静态
<body><div class="dahe"><div class="shijian"><span id="shi">00</span><span id="fen">00</span><span id="miao">00</span></div><div class="anniu"><button id="kai">开始</button><button id="zan">暂停</button><button id="jie">结束</button></div></div>
</body>
JS
<script>function $(id) {return document.getElementById(id)}var shi = $('shi'),fen = $('fen'),miao = $('miao'),kai = $('kai'),zan = $('zan'),jie = $('jie')var i = 0;var time;kai.onclick = function () {kai.disabled = truezan.disabled = falsejie.disabled = falsetime = setInterval(shijian, 100)}zan.onclick = function () {kai.disabled = falsezan.disabled = truejie.disabled = falseclearInterval(time)}jie.onclick = function () {kai.disabled = falsejie.disabled = trueclearInterval(time)i=0moveTime()}function shijian() {i++;moveTime()}function moveTime() {miao.innerText = formTime(i%60)fen.innerText = formTime(parseInt(i/60)%60)shi.innerText = formTime(parseInt(i/60/60)%60)}function formTime(j) {return j < 10 ? "0" + j : j}
</script>