JavaScript如何構建一個倒數計時器

本文小編為大家詳細介紹“JavaScript如何構建一個倒數計時器”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JavaScript如何構建一個倒數計時器”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

首先，你需要設置一個有效的結束日期。這應該是JavaScript的 Date.parse()  方法可以理解的任何格式的字符串。例如：

ISO 8601格式：

const deadline = '2015-12-31';

簡短格式：

const deadline = '31/12/2015';

或者，長格式：

const deadline = 'December 31 2015';

這些格式中的每一種都允許你指定一個準確的時間和一個時區(或者在ISO日期的情況下指定一個與UTC的偏移)。例如：

const deadline = 'December 31 2015 23:59:59 GMT+0200';

3.計算剩余時間下一步是計算剩余時間。我們需要編寫一個函數，該函數需要一個表示給定結束時間的字符串(如上所述)。然后，我們計算該時間與當前時間之間的時差。看起來像這樣：

function getTimeRemaining(endtime){   const total = Date.parse(endtime) - Date.parse(new Date());   const seconds = Math.floor( (total/1000) % 60 );   const minutes = Math.floor( (total/1000/60) % 60 );   const hours = Math.floor( (total/(1000*60*60)) % 24 );   const days = Math.floor( total/(1000*60*60*24) );    return {     total,     days,     hours,     minutes,     seconds   }; }

首先，我們要創建一個變量 total 以保留到截止日期為止的剩余時間。Date.parse()  函數將時間字符串轉換為毫秒值，這樣我們就可以將兩次相減，得到中間的時間量。

const total = Date.parse(endtime) - Date.parse(new Date());

4.將時間轉換為可用格式

現在我們要將毫秒轉換為天，小時，分鐘和秒。讓我們以秒為例：

const seconds = Math.floor( (t/1000) % 60 );

讓我們分解一下這里發生的事情。

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. 將毫秒除以1000可轉換為秒：(t/1000)

3. 將總秒數除以60，然后取余數。你不需要所有的秒，只需要計算分鐘數后剩下的那些：(t/1000) % 60

4. 四舍五入到最接近的整數。這是因為你需要完整的秒數，而不是幾分之一秒：Math.floor((t/1000)%60)

重復此邏輯，將毫秒轉換為分鐘，小時和天。

5.將時鐘數據輸出為可重復使用的對象

在準備好幾天，幾小時，幾分鐘和幾秒鐘之后，我們現在可以將數據作為可重復使用的對象返回：

return {   total,   days,   hours,   minutes,   seconds };

這個對象允許你調用你的函數，并獲得任何計算值。這是如何獲取剩余分鐘數的示例：

getTimeRemaining(deadline).minutes

方便吧?

6.在頁面上顯示時鐘，并在時鐘為零時停止時鐘

現在我們有了一個可以吐出剩余天數、小時、分鐘和秒數的函數，我們就可以建立我們的時鐘了。首先，我們將創建以下HTML元素來保存時鐘：

<div id="clockdiv"></div>

然后，我們將編寫一個函數，在新的div中輸出時鐘數據：

function initializeClock(id, endtime) {   const clock = document.getElementById(id);   const timeinterval = setInterval(() => {     const t = getTimeRemaining(endtime);     clock.innerHTML = 'days: ' + t.days + '<br>' +                       'hours: '+ t.hours + '<br>' +                       'minutes: ' + t.minutes + '<br>' +                       'seconds: ' + t.seconds;     if (t.total <= 0) {       clearInterval(timeinterval);     }   },1000); }

該函數有兩個參數，這兩個參數是包含時鐘的元素的id，以及倒計時的結束時間。在函數內部，我們將聲明一個 clock  變量，并使用它來保存對時鐘容器div的引用。這意味著我們不必一直查詢DOM。

接下來，我們將使用 setInterval 每秒執行一個匿名函數。此功能將執行以下操作：

• 計算剩余時間。

• 將剩余時間輸出到我們的div。

• 如果剩余時間為零停止計時。

此時，剩下的唯一步驟是像這樣運行時鐘：

initializeClock('clockdiv', deadline);

恭喜你!現在，你僅用18行JavaScript就擁有了一個基本時鐘。

7.準備展示你的時鐘

在設置時鐘樣式之前，我們需要進行一些改進。

• 消除初始延遲，使你的時鐘立即顯示。

• 讓時鐘腳本更有效率，這樣它就不會連續重建整個時鐘。

• 根據需要添加前導零。

7.1 消除初始延遲

在時鐘中，我們使用 setInterval  每秒更新一次顯示。多數情況下，這很好，除非在開始時會有一秒鐘的延遲。要消除此延遲，我們必須在間隔開始之前更新一次時鐘。

讓我們將傳遞給 setInterval 的匿名函數移到其自己的單獨函數中，我們可以將此函數命名為 updateClock。在 setInterval  外調用一次 updateClock 函數，然后在 setInterval 內再次調用。

在你的JavaScript中，替換這個

const timeinterval = setInterval(() => { ... },1000);

新代碼

function updateClock(){   const t = getTimeRemaining(endtime);   clock.innerHTML = 'days: ' + t.days + '<br>' +                     'hours: '+ t.hours + '<br>' +                     'minutes: ' + t.minutes + '<br>' +                     'seconds: ' + t.seconds;   if (t.total <= 0) {     clearInterval(timeinterval);   } }  updateClock(); // 首先運行一函數能以避免延遲 var timeinterval = setInterval(updateClock,1000);

7.2 避免不斷重建時鐘

我們需要使時鐘腳本更高效，我們只想更新時鐘中的數字，而不是每秒重建整個時鐘。實現此目的的一種方法是將每個數字放在 span 標簽內，并僅更新這些 span  的內容。

這是HTML：

<div id="clockdiv">     Days: <span class="days"></span><br>     Hours: <span class="hours"></span><br>     Minutes: <span class="minutes"></span><br>     Seconds: <span class="seconds"></span> </div>

現在讓我們參考這些元素。在定義 clock 變量的位置之后添加以下代碼

const daysSpan = clock.querySelector('.days'); const hoursSpan = clock.querySelector('.hours'); const minutesSpan = clock.querySelector('.minutes'); const secondsSpan = clock.querySelector('.seconds');

接下來，我們需要修改 updateClock 函數，使其只更新數字。新的代碼是這樣的：

function updateClock(){     const t = getTimeRemaining(endtime);      daysSpan.innerHTML = t.days;     hoursSpan.innerHTML = t.hours;     minutesSpan.innerHTML = t.minutes;     secondsSpan.innerHTML = t.seconds;      ... }

7.3 添加前導0

現在時鐘不再每秒都在重建，我們還有另一件事要做：添加前導零。例如，不是讓時鐘顯示7秒，而是顯示07秒。一種簡單的方法是在一個數的開頭加上一串“0”，然后切掉最后兩個數字。

例如，要在“seconds”值上添加前導零，你可以更改以下設置：

secondsSpan.innerHTML = t.seconds;

為

secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

如果你愿意，你也可以在分鐘和小時的前面加零。如果你已經走到這一步，恭喜你!你的時鐘現在已經可以顯示了。

8.更進一步

以下示例演示了如何為某些用例擴展時鐘。它們都是基于上面的基本例子。

8.1 自動調節時鐘

假設我們想讓時鐘在特定的日子出現，而不是在其他的日子。例如，我們可能有一系列事件即將發生，而不希望每次都手動更新時鐘。以下是如何提前安排事情的方法。

通過在CSS中將其 display 屬性設置為 none 來隱藏時鐘，然后將以下內容添加到 initializeClock 函數中(以 var clock  開頭的行之后)。這將導致只有在調用 initializeClock 函數后才會顯示時鐘：

clock.style.display = 'block';

接下來，我們可以指定顯示時鐘的日期。這將替換截止日期變量( deadline )：

const schedule = [     ['Jul 25 2015', 'Sept 20 2015'],     ['Sept 21 2015', 'Jul 25 2016'],     ['Jul 25 2016', 'Jul 25 2030'] ];

Schedule數組中的每個元素代表一個開始日期和一個結束日期。如上所述，它可以包含時間和時區，但我在這里使用了普通的日期，以保持代碼的可讀性。

最后，當用戶加載頁面時，我們需要檢查是否在指定的時間范圍內。此代碼應替換先前對 initializeClock 函數的調用：

// 遍歷schedule中的每個元素 schedule.forEach(([startDate, endDate]) => {   // 以毫秒為單位放置日期以便于比較   const startMs = Date.parse(startDate);   const endMs = Date.parse(endDate);   const currentMs = Date.parse(new Date());    // 如果當前日期在開始日期和結束日期之間，則顯示時鐘   if (endMs > currentMs && currentMs >= startMs ) {     initializeClock('clockdiv', endDate);   } });

現在，你可以提前安排你的時鐘，而不必手動更新它。如果你愿意，你可以縮短代碼。為了便于閱讀，我把我的代碼寫得很啰嗦。

8.2 從用戶到達起將計時器設置為10分鐘

用戶到達或開始特定任務后，有必要在給定的時間內設置倒計時。我們將在此處將計時器設置為10分鐘，但是你可以使用任意時間。

我們需要做的就是用以下命令替換 deadline 變量：

const timeInMinutes = 10; const currentTime = Date.parse(new Date()); const deadline = new Date(currentTime + timeInMinutes*60*1000);

這段代碼以當前時間為基準，增加10分鐘。這些值將轉換為毫秒，因此可以將它們加在一起并變成新的截止日期。

現在我們有一個時鐘，從用戶到達時開始倒計時十分鐘，你可以自由發揮，嘗試不同的時間長度。

8.3 跨頁面保持時鐘進度

有時，除了當前頁面外，還需要保留時鐘狀態。如果我們想在整個網站上設置10分鐘的計時器，則我們不希望在用戶轉到其他頁面時重置該計時器。

一個解決方案是將時鐘的結束時間保存在一個cookie中。這樣一來，導航到一個新的頁面就不會把結束時間重置到十分鐘以后。

這是邏輯：

如果Cookie中記錄了截止日期，使用該截止日期。

如果不存在Cookie，請設置一個新的截止日期并將其存儲在Cookie中。

要實現這一點，請使用以下命令替換 deadline 變量：

let deadline;  // 如果有一個名為myClock的cookie，則使用該值作為截止日期 if(document.cookie && document.cookie.match('myClock')){   // 從Cookie獲取截止日期值   deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2]; } else {   // 否則，請設置從現在開始10分鐘的截止日期，   // 將其保存在具有該名稱的cookie中    // 創建從現在開始10分鐘的截止日期   const timeInMinutes = 10;   const currentTime = Date.parse(new Date());   deadline = new Date(currentTime + timeInMinutes*60*1000);    // 將截止日期存儲在cookie中以供將來引用   document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com'; }

需要注意的是，你需要將 .yourdomain.com 改為你的實際域名。

讀到這里，這篇“JavaScript如何構建一個倒數計時器”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。