如何用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. 將毫秒除以1000可轉換為秒：(t/1000)

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

3. 四舍五入到最接近的整數。這是因為你需要完整的秒數，而不是幾分之一秒：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構建一個倒數計時器”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！