JavaScript中簡單的定時器

   <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         }

標籤：JavaScript

上一篇：html canvas

下一篇：JavaScript連載5-資料轉換為Number與String、數字決議