首先我先把我使用的css代碼樣式與html標簽結構po一下，這些都是自定義的，可以自己編寫自己喜歡的樣式
html結構
<body>
<div id="container">
<div id="time">
<span id="hour">00</span> //內容初始為00，由id來獲取span這個元素，然后通過js來改變span內的文字內容
<span>:</span>
<span id="min">00</span> //內容初始為00，由id來獲取span這個元素，然后通過js來改變span內的文字內容
<span>:</span>
<span id="sec">00</span> //內容初始為00，由id來獲取span這個元素，然后通過js來改變span內的文字內容
</div>
<button id="btn">開始</button> //通過id獲取button的文字內容和當前狀態然后定義對應的事件
<button id="reset">重置</button> //通過id獲取button當前狀態然后定義對應的事件
</div>
</body>
style樣式
#container{
height: 300px;
width: 200px;
margin: 100px auto;
border: 1px solid grey;
border-radius: 15px;
}
#container button{
display: block;
background: burlywood;
border: none;
border-radius: 20px;
margin: 20px auto;
padding: 5px 30px;
color: green;
font-size: 20px;
outline: none;
}
#container #time{
font-size: 22px;
margin: 25px auto;
text-align: center;
}
最終實現這樣的效果
接下來讓我們來分析js代碼，
如果你把html結構代碼給快速滑過去甚至沒看的話，我建議你划回去看一看我的注釋，畢竟你能看到這篇文章就證明你應該是正在准備入門的web前端小白
<script>
var i = 0; //使用i來充當秒數統計setinterval方法的刷新次數
var timer = null; //接收setinterval的返回值，以便於暫停和重置功能的實現
var isRunning = false; //來定義開始按鈕和定時器的狀態，默認定時器不啟動，button文字為開始
function $(id) { //定義一個函數，功能為簡化js代碼量，以便於快速通過id獲取當前html元素
return document.getElementById(id);
}
function doubleNumber(num) { //計時器輔助功能，因為計時器在小於10的時候只顯示一位數，例如 1 ，2。。。
//而我們習慣的方式為01,02.。。，所以定義一個函數方法來優化用戶體驗
if (num < 10) {
return '0' + num;
} else {
return num;
}
}
window.onload = function(){ //使用window.onload = function()來讓頁面所有元素加載完畢之后才執行js代碼，可以優化用戶體驗應對網速較慢的情況
function funcStart(){ //這是計時器的開始功能
timer = setInterval(function(){ //使用timer來接收setinterval的值，setinterval是js內置的計時器功能，執行過程為，。
//第一個參數為函數，第二個為毫秒數，經過指定的毫秒數來執行一次傳入的函數
i++; //這是計時器秒數分鍾數和小時的基准“i”
$("sec").innerHTML = doubleNumber(i % 60); //秒數等於i%60，然后被doubleNumber方法應用，也就是上面所定義的的輔助功能
$("min").innerHTML = doubleNumber(parseInt(i / 60) % 60);
$("hour").innerHTML = doubleNumber(parseInt(i / 3600) % 60);
},1000) //每一千毫秒 = 一秒 刷新一次
}
function funcPause(){
clearInterval(timer); //使用js內置功能暫停計時器
}
$("reset").onclick = function(){
i = 0; //重置功能，將“i”設為0，然后暫停計時器，把時分秒標簽內容歸為字符串類型的‘00’；
clearInterval(timer);
$("sec").innerHTML = '00';
$("min").innerHTML = '00';
$("hour").innerHTML = '00';
$("btn").innerHTML = "開始"; //重置之后將btn的標簽內容設置為“開始”
}
$("btn").onclick = function(){ //當id為btn的按鈕被點擊時，執行以下函數
if (!isRunning) {
$("btn").innerHTML = "暫停"; //設置btn標簽內容為暫停
funcStart(); // isRunning默認為false 那么isRunning的否就是true，就是代表當前計時器並沒有運行，然后執行funcStart()功能
isRunning = true //設置 isRunning = true，然后當再次點擊btn按鈕時則運行else函數，因為此時isRunning的否就是false了
} else {
$("btn").innerHTML = "開始"; //設置btn標簽內容為開始
funcPause(); // 否則就執行funcPause()函數功能
isRunning = false; //設置 isRunning =false，然后當再次點擊btn按鈕時則會運行if函數，因為此時isRunning的否就是true了
}
}
}
</script>
好了以上就是全部內容，如果你喜歡麻煩動動小手點個贊或者有什么疑問可以留言我將盡快解答的~