【javascript】有進度條的倒數計時器
本次目標是要製作一個倒數計時器,並以進度條的方式呈現,倒數結束後再觸發一個自訂義事件。
計時器的類型有很多種,像是可以設定要倒數幾分幾秒(比如定時炸彈),或是設定要倒數到某個目標時間點(比如距離某某日還剩幾天)。
雖然設定的方式不同,但作法其實大同小異,這次我們會以前者來練習。
進度條
想像一下,如果我們想用色紙來製作實體進度條,基本思路是準備兩張不同顏色的紙,將其中一張裁剪成只留下邊框,另一張則放在它底下,最後只要將底下那張紙左右拉動,看起來就像是進度條或遊戲裡的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屬性。
希望有幫助到你!