JavaScript 中的倒數計時器
Nithin Krishnan
2023年1月30日
2021年4月29日
這篇文章將為你提供一種使用 JavaScript 建立倒數計時器的簡便方法。
下面是一個一分半鐘的計時器的程式碼。
<h1 class="text-center" id="count-down-timer"></h1>
function paddedFormat(num) {
return num < 10 ? "0" + num : num;
}
function startCountDown(duration, element) {
let secondsRemaining = duration;
let min = 0;
let sec = 0;
let countInterval = setInterval(function () {
min = parseInt(secondsRemaining / 60);
sec = parseInt(secondsRemaining % 60);
element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;
secondsRemaining = secondsRemaining - 1;
if (secondsRemaining < 0) { clearInterval(countInterval) };
}, 1000);
}
window.onload = function () {
let time_minutes = 1; // Value in minutes
let time_seconds = 30; // Value in seconds
let duration = time_minutes * 60 + time_seconds;
element = document.querySelector('#count-down-timer');
element.textContent = `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;
startCountDown(--duration, element);
};
JavaScript 中的到時計時器示例程式碼
-
設定計時器的 HTML 標籤
在上面的程式碼中,
<h1>
標籤保留計時器顯示。在你的網頁 HTML 中使用此程式碼。由於在 JavaScript 中使用count-down-timer
id 訪問元素時需要id="count-down-timer"
,以便在執行時動態更改元素文字。<h1 class="text-center" id="count-down-timer"></h1>
-
設定計時器值
標籤到位後,下一步就是設定計數時間值。通常,網頁使用內建在其程式碼中的硬編碼時間,該時間不可自定義。你可以在
window.onload
方法中以time_minutes
和time_seconds
設定計時器。例如,如果你希望將計時器設定為一個半分鐘,則按如下所示設定程式碼:let time_minutes = 1; // Value in minutes let time_seconds = 30; // Value in seconds
如果希望設定為 3 分鐘,則設定
time_minutes = 3
並保留time_seconds = 0
。現在,一旦你執行程式碼或重新載入 HTML,就可以獲取更新的輸出。
JavaScript 中的倒數計時器程式碼的說明
-
執行從
window.onload
函式開始。它採用你設定的計時器值,並計算總的持續時間(以秒為單位)。let time_minutes = 1; // Value in minutes let time_seconds = 30; // Value in seconds let duration = time_minutes * 60 + time_seconds;
-
document.querySelector('#count-down-timer')
獲取元素的 HTML 節點。該節點將用於重新整理計時器值。element = document.querySelector('#count-down-timer');
-
元素可用後,將使用我們設定的值進行初始化。例如,在程式碼中是 1 分 30 秒。它以填充格式設定。
function paddedFormat(num) { return num < 10 ? "0" + num : num; } console.log(paddedFormat(3)); console.log(paddedFormat(12));
輸出:
03 12
-
pappedFormat(num)
函式返回填充的數字。在數分鐘和數秒內,通過為數字值加上字首0
來填充它們。例如,將 2 分鐘和 5 秒分別填充為 02 和 05。element.textContent = `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;
-
接下來,我們呼叫
startCountDown(--duration, element)
函式,以秒為單位傳遞duration
以及 display 元素的 HTML 節點。我們現在顯示值01:30
。因此,我們需要計時器從01:29
開始。這就是為什麼我們使用持續時間為--duration
的減一元運算子的原因。startCountDown(--duration, element);
-
startCountDown(duration, element)
是計時器的核心。在此,我們使用 JavaScript 的setInterval(function(){}, 1000)
函式在每秒(1000 毫秒)後執行計時器,直到使用clearInterval(countInterval)
將其清除或終止。function startCountDown(duration, element) { let secondsRemaining = duration; let min = 0; let sec = 0; let countInterval = setInterval(function () { min = parseInt(secondsRemaining / 60); sec = parseInt(secondsRemaining % 60); element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`; secondsRemaining = secondsRemaining - 1; if (secondsRemaining < 0) { clearInterval(countInterval) }; }, 1000); }
-
在
setinterval()
函式內部,計算了顯示的分鐘和秒數。通過將remainingSeconds
值除以 60 得到分鐘值並取其整數部分來計算分鐘。let secondsRemaining = 89; let min = parseInt(secondsRemaining / 60); let sec = parseInt(secondsRemaining % 60); console.log(secondsRemaining + "seconds"); console.log(min); console.log(sec);
輸出:
89 //Equivalent to 1 min and 29 seconds 1 29
-
接下來,我們通過使用 HTML 節點元素的
textContent
屬性設定文字來顯示計算出的分鐘數和秒數。element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;
-
接下來,減少
secondsRemaining
的值,計時器功能通過setInterval()
方法每秒執行一次。 -
最後,一旦
secondsRemaining
值為 0,則觸發clearInterval(countInterval)
以停止計時器。它還可以確保計時器不會重新啟動或進入負值狀態。