https://www.cnblogs.com/sandraryan/
點擊開始計時，可以計次，暫停。點了暫停可以繼續計時，計次，點擊重置清空。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap {
width: 90%;
margin: 50px auto;
background-color: #333333;
text-align: center;
padding: 50px 0;
}
.time {
margin-bottom: 50px;
}
span {
color: white;
font-size: 100px;
}
.control button {
width: 80px;
height: 40px;
border-radius: 7px;
border: 1px solid #333;
outline: none;
font-size: 20px;
color: white;
}
.control button:nth-child(1) {
background-color: #90f62b;
}
.control button:nth-child(2) {
background-color: #35b1f8;
}
.control button:nth-child(3) {
background-color: #f5a123;
display: none;
}
.control button:nth-child(4) {
background-color: #f75629;
display: none;
}
.time span:last-child {
display: inline-block;
width: 90px;
}
#show {
color: white;
font-size: 18px;
margin: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="time">
<span>00:</span>
<span>00:</span>
<span>00:</span>
<span>000</span>
</div>
<div class="control">
<button>啟動</button>
<button>復位</button>
<button>計次</button>
<button>暫停</button>
</div>
<div id="show"></div>
</div>
<script>
// 獲取元素
var num = document.querySelectorAll(".time span");
var start = document.querySelectorAll(".control button")[0];
var reset = document.querySelectorAll(".control button")[1];
var times = document.querySelectorAll(".control button")[2];
var pause = document.querySelectorAll(".control button")[3];
var show = document.getElementById("show");
// 初始化時間值
var hour = 0,
minutes = 0,
seconds = 0,
ms = 0;
// 創建定時器的變量
var timer;
// 創建時間數組
var timeArr = [hour, minutes, seconds, ms];
function fun() {
// 設置定時器
timer = setInterval(function () {
// +=11 秒數最后一位數也會變化，+=10最后一位永遠是0
ms += 11;
// 如果毫秒數大於0小於999，毫秒數的位置還是該毫秒數
// 否則（大於999），毫秒數的位置替換為000，毫秒數重置為0，分鍾++
if (ms > 0 && ms < 999) {
num[3].innerHTML = ms;
} else {
num[3].innerHTML = '000';
ms = 0;
seconds++;
}
// 如果秒數大於0並小於59
if (seconds > 0 && seconds < 59) {
// 如果秒數小於10，秒數寫為0和當前秒數（01-09）
if (seconds < 10) {
num[2].innerHTML = '0' + seconds + ':';
} else {
// 秒數大於10，秒數為當前值
num[2].innerHTML = seconds + ':';
}
} else {
// 秒數超過59，重置為0，分鍾++，秒數位置變成00
seconds = 0;
minutes++;
num[2].innerHTML = "00" + ':';
}
if (seconds > 59) {
// 如果秒數大於59，且分鍾小於10，補0，分鍾大於10，顯示
if (minutes < 10) {
num[1].innerHTML = '0' + minutes + ':';
} else {
num[1].innerHTML = minutes + ':';
}
// 秒數大於59，分鍾++ 顯示分鍾數
minutes++;
num[1].innerHTML = minutes + ':';
// 如果秒數小於59，顯示00分鍾
// 分鍾變成0，小時++
} else {
num[1].innerHTML = '00' + ':';
minutes = 0;
hour++;
}
// 如果，分鍾數大於59，進入外層條件
if (minutes > 59) {
// 如果小時小於10，小時處的內容為補0 + 小時數
if (hour < 10) {
num[0].innerHTML = '0' + hour + ':';
} else {
num[0].innerHTML = hour + ':';
}
}
}, 10);
}
// 封裝一個函數
// t作為計數器，作為每一條時間的序列號
var t = 0;
function counter() {
// 用abcd獲取num數組的各個下標的值
var a = num[0].innerHTML;
var b = num[1].innerHTML;
var c = num[2].innerHTML;
var d = num[3].innerHTML;
// 函數調用，計時器++（d點一次加一條）
t++;
// 創建一個p元素，追加給展示區（展示每一條事件列表）
var n = document.createElement('p');
n.innerHTML = t + '.' + a + b + c + d;
show.appendChild(n);
}
// 清除定時器
function clear() {
clearInterval(timer);
}
// 重置函數
function over() {
// 清楚定時器
clearInterval(timer);
// 把時間重置
hour = 0;
seconds = 0;
minutes = 0;
ms = 0;
// 頁面元素賦值重置
num[0].innerHTML = '0' + hour + ':';
num[1].innerText = '0' + minutes + ' : ';
num[2].innerText = '0' + seconds + ' . ';
num[3].innerText = '00' + ms;
}
// 開始按鈕注冊點擊時間，隱藏開始重置按鈕，計時暫停按鈕出現
// 調用函數開始運行整個計時器
start.onclick = function () {
start.style.display = "none";
reset.style.display = "none";
times.style.display = "inline-block";
pause.style.display = "inline-block";
fun();
}
// 點擊停止按鈕，隱藏停止計次按鈕，開始重置按鈕出現
pause.onclick = function () {
pause.style.display = "none";
times.style.display = "none";
start.style.display = "inline-block";
reset.style.display = "inline-block";
clear();
}
// 點擊計次按鈕，在展示區防放置當前時間值
times.onclick = function () {
counter();
}
// 點擊重置按鈕，重置頁面元素，重置時間，清空頁面內容
reset.onclick = function () {
over();
show.innerHTML = '';
}
</script>
</body>
</html>
that‘s all ~~~