築夢角落

致力於用最生活化的例子讓所有人都能懂程式,也喜歡分享動漫、小說心得,以及自己的所見所聞、所思所想。

【javascript】有進度條的倒數計時器

最後更新時間 : 2022-05-28 | viewed : 732

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

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

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

 

進度條


想像一下,如果我們想用色紙來製作實體進度條,基本思路是準備兩張不同顏色的紙,將其中一張裁剪成只留下邊框,另一張則放在它底下,最後只要將底下那張紙左右拉動,看起來就像是進度條遊戲裡的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屬性

 

希望有幫助到你!

 

 
我要留言!
 

X
暱稱(選填)
email(選填,僅站長可見。)
留言 To:#