本次目標是要製作一個倒數計時器，並以進度條的方式呈現，倒數結束後再觸發一個自訂義事件。

計時器的類型有很多種，像是可以設定要倒數幾分幾秒（比如定時炸彈），或是設定要倒數到某個目標時間點（比如距離某某日還剩幾天）。

雖然設定的方式不同，但作法其實大同小異，這次我們會以前者來練習。

進度條

想像一下，如果我們想用色紙來製作實體進度條，基本思路是準備兩張不同顏色的紙，將其中一張裁剪成只留下邊框，另一張則放在它底下，最後只要將底下那張紙左右拉動，看起來就像是進度條或遊戲裡的HP條在增增減減了。

<div class="progessbar">
    <div class="text"></div>
    <div class="bar"></div>
 </div>

progessbar是進度條的外框，bar相當於是放在它底下的那張紙，text則是要在進度條內顯示的文字。

至於樣式，則是利用css來調整，詳細可參考最後成果。

計時器

最簡單的作法是使用setInterval()，它會依照固定的頻率，重複呼叫同一個函式。

var timerId = setInterval(timer, 1000); // 每隔1000毫秒，呼叫一次timer。

如果想停止計時器，可以呼叫clearInterval()，並把上面的timerId傳給它。

clearInterval(timerId); // 依據timerId，停止指定的timer。

如此一來，只要在timer裡持續把某個變數遞減，就形同倒數計時器。

 // 設定倒數60秒。
 var count = 60;
 
 function timer() {
    count--; // 每次執行timer就把count減1。
    
    // 若已計數完畢，則停止計時。
    if (count == 0) 
       clearInterval(timerId);
 }

觸發事件

把上面的timer函式修改一下。

function timer() {
    count--; // 每次執行timer就把count減1。
    
    // 若已計數完畢，則停止計時。
    if (count == 0) {
       clearInterval(timerId);
 
       /*
          時間到！在這裡做任何你想做的事。
       */
    }
 }

策略說明

上面是一個簡單的計時器作法，但實際上 javascript 的定時任務並沒有那麼精確，而且根據瀏覽器的不同，也可能在切換頁籤等動作時暫停計時。

所以實務上我選擇的作法是：

(1) 先設定一個目標時間（決定要倒數幾秒），並記錄起始時間（計時器啟動的時間）。

(2) 在timer每次被觸發時，都用new Date().getTime()來獲取當前時間。

(3) 計算當前時間跟起始時間相差幾秒，就知道自計時器啟動後，經過了多少時間。

(4) 利用(3)的結果，計算目標時間跟經過時間相差幾秒，就知道倒數計時器要顯示的剩餘時間。

聽起來可能有點複雜，具體作法請參考底下的完整程式碼。

完整程式碼

（若無法正常顯示，請移駕至CODEPEN：https://codepen.io/aa41807/pen/MWrZWmY）

下一步練習

現在的進度條是向左縮減的，試試看怎麼做可以讓進度條向右縮減？也可以試試把進度條改成從0開始填滿的模式。

如果想參考我的作法，可以接著閱讀【js+css】倒數計時器進度條範例，一次弄懂left跟right屬性。

希望有幫助到你！