JavaScript 中有兩種方法實作倒數計時器:setInterval():建立計時器,每隔一指定毫秒重複呼叫函數。 setTimeout():只呼叫一次函數,延遲指定時間。
JS中倒數計時器的實作
在JavaScript中,有幾種方法可以實作倒數計時器。以下兩種方法是常用的:
1. setInterval() 方法
#setInterval()
方法建立一個定時器,它以指定的毫秒數重複呼叫一個函數。若要使用 setInterval()
方法實作倒數計時器,請依照下列步驟操作:
setInterval()
方法每隔一定的毫秒數呼叫更新函數。 2. setTimeout() 方法
#setTimeout()
方法只呼叫一次函數,延遲指定的時間。若要使用 setTimeout()
方法實作倒數計時器,請依照下列步驟操作:
setTimeout()
方法在剩餘時間後呼叫函數。 範例程式碼 (setInterval() 方法)
<code>function updateCountdown() { const targetTime = new Date('2023-12-31'); const currentTime = new Date(); const msToTarget = targetTime - currentTime; const msToHours = Math.floor(msToTarget / (1000 * 60 * 60)); const msToMinutes = Math.floor(msToTarget / (1000 * 60)) % 60; const msToSeconds = Math.floor(msToTarget / 1000) % 60; const countdownDisplay = document.getElementById('countdown'); countdownDisplay.innerHTML = `${msToHours}:${msToMinutes}:${msToSeconds}`; if (msToTarget <= 0) { clearInterval(timeoutID); } } const timeoutID = setInterval(updateCountdown, 1000);</code>
範例程式碼 (setTimeout() 方法)
<code>function countdown(ms) { const targetTime = Date.now() + ms; const countdownDisplay = document.getElementById('countdown'); const update = () => { const msRemaining = targetTime - Date.now(); if (msRemaining <= 0) { return; } const msToHours = Math.floor(msRemaining / (1000 * 60 * 60)); const msToMinutes = Math.floor(msRemaining / (1000 * 60)) % 60; const msToSeconds = Math.floor(msRemaining / 1000) % 60; countdownDisplay.innerHTML = `${msToHours}:${msToMinutes}:${msToSeconds}`; setTimeout(update, 1000); } update(); } countdown(3600000); // 1 小时</code>
以上是js中倒數計時器怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!