千秋此意
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计时器</title>
</head>
<body>
<div id="timer-container">
<h2>计时器</h2>
<input type="text" id="timer-view" readonly value="00:00:00:00">
<button onclick="start()">开始计时</button>
<button onclick="pause()">结束计时</button>
<button onclick="reset()">复位</button>
</div>
<script>
var timer = null;
var msDef = 0;
var timerData = [];
var timerView = document.getElementById('timer-view');
function start() {
clearInterval(timer);
timer = setInterval(function() {
update((msDef += 10, msDef));
}, 10);
}
function pause() {
clearInterval(timer);
}
function reset() {
clearInterval(timer);
update((msDef = 0, msDef));
}
function update(ms) {
timerData[0] = Math.floor(ms / 3600000);
timerData[1] = Math.floor(ms / 60000 % 60);
timerData[2] = Math.floor(ms / 1000 % 60)
timerData[3] = Math.floor(ms / 10 % 100);
timerView.value = formatTime(timerData);
}
function formatTime(arr) {
for (var i = 0; i < arr.length; i++) {
arr[i] = (arr[i] < 10 ? '0' : '') + arr[i];
}
return arr.join(':');
}
</script>
</body>
</html>（只写了js，样式简单楼主自己写下吧~，望采纳~）