javascript 中可以通過(guò)使用 setinterval() 函數(shù)實(shí)現(xiàn)倒計(jì)時(shí)器,并顯示剩余秒數(shù):確定要倒計(jì)時(shí)的秒數(shù);創(chuàng)建剩余秒數(shù)變量;使用setinterval()函數(shù)每秒檢查剩余秒數(shù)并更新顯示;當(dāng)剩余秒數(shù)為0時(shí),清除定時(shí)器。
JavaScript 中的倒計(jì)時(shí)器實(shí)現(xiàn)秒數(shù)顯示
在 JavaScript 中,可以使用 setInterval()
函數(shù)來(lái)實(shí)現(xiàn)倒計(jì)時(shí)器并顯示剩余秒數(shù)。以下是如何實(shí)現(xiàn):
步驟:
-
確定要倒計(jì)時(shí)的秒數(shù)。
創(chuàng)建一個(gè)變量來(lái)存儲(chǔ)剩余秒數(shù)。
使用
setInterval()
函數(shù)每秒檢查剩余秒數(shù)并更新顯示。當(dāng)剩余秒數(shù)達(dá)到 0 時(shí),清除定時(shí)器。
代碼示例:
<code class="javascript">// 設(shè)定倒計(jì)時(shí)秒數(shù) const totalSeconds = 60; // 創(chuàng)建剩余秒數(shù)變量 let remainingSeconds = totalSeconds; // 創(chuàng)建定時(shí)器,每秒檢查剩余秒數(shù) const timer = setInterval(() => { // 更新剩余秒數(shù)顯示 document.getElementById("timer").textContent = remainingSeconds; // 減少剩余秒數(shù) remainingSeconds--; // 當(dāng)剩余秒數(shù)達(dá)到 0 時(shí),清除定時(shí)器 if (remainingSeconds === 0) { clearInterval(timer); } }, 1000);</code>
登錄后復(fù)制
代碼解釋:
totalSeconds
變量存儲(chǔ)要倒計(jì)時(shí)的秒數(shù)。
remainingSeconds
變量存儲(chǔ)剩余秒數(shù),并在每次定時(shí)器觸發(fā)時(shí)更新。
setInterval()
函數(shù)每隔 1000 毫秒(1 秒)觸發(fā)一次回調(diào)函數(shù)。
在回調(diào)函數(shù)中,更新剩余秒數(shù)顯示、減少剩余秒數(shù)并檢查剩余秒數(shù)是否為 0。
如果剩余秒數(shù)為 0,則清除定時(shí)器以停止倒計(jì)時(shí)。