定時器功能分析 核心思路: 定義一個變數,根據定時器,每秒執行一次,每次執行++自增操作 變數存儲的數值,就會每秒+1 現在需要的記錄效果,是每0.01秒,也就是10毫秒執行一次 根據累計的數值,執行進位 ms 如果達到 100,就是1秒 如果 秒 達到 60 就是 1分鐘 如果 分鐘 達到 60 ...
定時器功能分析 核心思路: 定義一個變數,根據定時器,每秒執行一次,每次執行++自增操作 變數存儲的數值,就會每秒+1 現在需要的記錄效果,是每0.01秒,也就是10毫秒執行一次 根據累計的數值,執行進位 ms 如果達到 100,就是1秒 如果 秒 達到 60 就是 1分鐘 如果 分鐘 達到 60 就是 1小時 效果圖：
<div>00:00:00:00</div>
<button>開始</button>
<button disabled>暫停</button>
<button disabled>繼續</button>
<button disabled>重置</button>
<script>
var ms = 0; // 毫秒
var s = 0; // 秒
var m = 0; // 分鐘
var h = 0; // 小時
// 定義存儲 時 分 秒 毫秒 字元串的變數
// 如果直接在 ms s m h 變數上進行 拼接操作,會影響 ++操作的執行
// 單獨的建立變數,來存儲累加時間的執行結果
var msStr = '';
var sStr = '';
var mStr = '';
var hStr = '';
// 因為定時器,是定義在函數內部,
// 必須定義一個全局變數,來存儲定時器
// 在函數外部可以調用,終止定時器
var time = 0;
// 獲取div標簽對象
var oDiv = document.querySelector('div');
// 獲取按鈕的標簽對象
var oStart = document.querySelectorAll('button')[0];
var oPause = document.querySelectorAll('button')[1];
var oCont = document.querySelectorAll('button')[2];
var oReset = document.querySelectorAll('button')[3];
</script>
開始按鈕：
1 oStart.onclick = function(){ 2 // 點擊開始按鈕,執行函數,執行秒錶計時 3 setTimeStr(); 4 // 可以點暫停 5 oPause.disabled = false; 6 // 其他標簽都不能點 7 oStart.disabled = true; 8 oCont.disabled = true; 9 oReset.disabled = true; 10 }
暫定按鈕：
1 oPause.onclick = function(){ 2 // 點擊暫停按鈕,清除定時器,終止秒錶執行 3 clearInterval(time); 4 // 暫停本身和開始不能點 5 oPause.disabled = true; 6 oStart.disabled = true; 7 // 繼續和重置能點了 8 oCont.disabled = false; 9 oReset.disabled = false; 10 }
繼續按鈕：
1 oCont.onclick = function(){ 2 // 點擊繼續按鈕,繼續執行定時器 3 setTimeStr(); 4 // 暫停可以點 5 oPause.disabled = false; 6 // 其他都不能點 7 oCont.disabled = true; 8 oReset.disabled = true; 9 oStart.disabled = true; 10 }
重置按鈕：
1 oReset.onclick = function(){ 2 // 點擊重置按鈕,將所有的數據,都恢復到0的狀態 3 // 所有變數存儲的數據都是 0 , div中的內容,也恢復到0 4 // 定義所有存儲時間的變數,存儲的數值為0 5 ms = 0; // 毫秒 6 s = 0; // 秒 7 m = 0; // 分鐘 8 h = 0; // 小時 9 // 將div中的內容,設定為初始狀態的00:00:00:00內容 10 oDiv.innerHTML = '00:00:00:00'; 11 // 開始可以點 12 oStart.disabled = false; 13 // 其他都不能點 14 oPause.disabled = true; 15 oCont.disabled = true; 16 oReset.disabled = true; 17 }定義函數,這個函數的作用就是記錄,執行的時間：
1 function setTimeStr(){ 2 // 賦值操作,將定時器,存儲在全局作用域變數中 3 // 此處只是賦值操作 4 time = setInterval(function(){ 5 ms++; 6 // 毫秒 是 10毫秒一增加 7 // ms存儲的數值,如果達到100,就是1秒種了 8 // 給 秒單位 進位 s++ 9 // ms本身,需要重新開始記錄數值 10 // 0:0:0:99 ---> 0:0:1:00 11 if(ms == 100){ 12 s++; // 秒進位 13 ms = 0; // ms本身清零,重新記錄 14 } 15 if(s == 60){ 16 m++; // 分鐘進位 17 s = 0; // s秒 清零 18 } 19 if(m == 60){ 20 h++; // 小時進位 21 m = 0; // m分鐘 清零 22 } 23 // 小時記錄,可以每24小時清零一次 24 // 或者 100小時清零一次,都可以,根據需求來 25 if(h == 100){ 26 h = 0; 27 } 28 // 如果記錄的時間小於0,要做補零操作 29 if(ms < 10){ 30 msStr = '0' + ms; 31 }else{ 32 msStr = ms; 33 } 34 if(s < 10){ 35 sStr = '0' + s; 36 }else{ 37 sStr = s; 38 } 39 if(m < 10){ 40 mStr = '0' + m; 41 }else{ 42 mStr = m; 43 } 44 if(h < 10){ 45 hStr = '0' + h; 46 }else{ 47 hStr = h; 48 } 49 // 每次執行,返回一個記錄時間的字元串 50 // 將這個字元串,寫入到div中 51 oDiv.innerHTML = `${hStr}:${mStr}:${sStr}:${msStr}`; 52 } , 10); 53 console.log(time); 54 }
