JavaScript中怎么構(gòu)建一個倒數(shù)計時器

JavaScript中怎么構(gòu)建一個倒數(shù)計時器，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

ISO 8601格式：

const deadline = '2015-12-31';

簡短格式：

const deadline = '31/12/2015';

或者，長格式：

const deadline = 'December 31 2015';

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

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

3.計算剩余時間下一步是計算剩余時間。我們需要編寫一個函數(shù)，該函數(shù)需要一個表示給定結(jié)束時間的字符串(如上所述)。然后，我們計算該時間與當(dāng)前時間之間的時差?？雌饋硐襁@樣：

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   }; }

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

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

4.將時間轉(zhuǎn)換為可用格式

現(xiàn)在我們要將毫秒轉(zhuǎn)換為天，小時，分鐘和秒。讓我們以秒為例：

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

讓我們分解一下這里發(fā)生的事情。

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

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

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

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

重復(fù)此邏輯，將毫秒轉(zhuǎn)換為分鐘，小時和天。

5.將時鐘數(shù)據(jù)輸出為可重復(fù)使用的對象

在準備好幾天，幾小時，幾分鐘和幾秒鐘之后，我們現(xiàn)在可以將數(shù)據(jù)作為可重復(fù)使用的對象返回：

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

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

getTimeRemaining(deadline).minutes

方便吧?

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

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

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

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

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); }

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

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

• 計算剩余時間。

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

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

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

initializeClock('clockdiv', deadline);

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

7.準備展示你的時鐘

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

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

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

• 根據(jù)需要添加前導(dǎo)零。

7.1 消除初始延遲

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

讓我們將傳遞給 setInterval 的匿名函數(shù)移到其自己的單獨函數(shù)中，我們可以將此函數(shù)命名為 updateClock。在 setInterval  外調(diào)用一次 updateClock 函數(shù)，然后在 setInterval 內(nèi)再次調(diào)用。

在你的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(); // 首先運行一函數(shù)能以避免延遲 var timeinterval = setInterval(updateClock,1000);

7.2 避免不斷重建時鐘

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

這是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>

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

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

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

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

7.3 添加前導(dǎo)0

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

例如，要在“seconds”值上添加前導(dǎo)零，你可以更改以下設(shè)置：

secondsSpan.innerHTML = t.seconds;

為

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

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

8.更進一步

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

8.1 自動調(diào)節(jié)時鐘

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

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

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數(shù)組中的每個元素代表一個開始日期和一個結(jié)束日期。如上所述，它可以包含時間和時區(qū)，但我在這里使用了普通的日期，以保持代碼的可讀性。

最后，當(dāng)用戶加載頁面時，我們需要檢查是否在指定的時間范圍內(nèi)。此代碼應(yīng)替換先前對 initializeClock 函數(shù)的調(diào)用：

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

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

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

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

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

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

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

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

8.3 跨頁面保持時鐘進度

有時，除了當(dāng)前頁面外，還需要保留時鐘狀態(tài)。如果我們想在整個網(wǎng)站上設(shè)置10分鐘的計時器，則我們不希望在用戶轉(zhuǎn)到其他頁面時重置該計時器。

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

這是邏輯：

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

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

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

let deadline;  // 如果有一個名為myClock的cookie，則使用該值作為截止日期 if(document.cookie && document.cookie.match('myClock')){   // 從Cookie獲取截止日期值   deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2]; } else {   // 否則，請設(shè)置從現(xiàn)在開始10分鐘的截止日期，   // 將其保存在具有該名稱的cookie中    // 創(chuàng)建從現(xiàn)在開始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 改為你的實際域名。

看完上述內(nèi)容，你們掌握JavaScript中怎么構(gòu)建一個倒數(shù)計時器的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！