JavaScript如何構(gòu)建一個(gè)倒數(shù)計(jì)時(shí)器

本文小編為大家詳細(xì)介紹“JavaScript如何構(gòu)建一個(gè)倒數(shù)計(jì)時(shí)器”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JavaScript如何構(gòu)建一個(gè)倒數(shù)計(jì)時(shí)器”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

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

ISO 8601格式：

const deadline = '2015-12-31';

簡(jiǎn)短格式：

const deadline = '31/12/2015';

或者，長(zhǎng)格式：

const deadline = 'December 31 2015';

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 四舍五入到最接近的整數(shù)。這是因?yàn)槟阈枰暾拿霐?shù)，而不是幾分之一秒：Math.floor((t/1000)%60)

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

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

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

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

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

getTimeRemaining(deadline).minutes

方便吧?

6.在頁(yè)面上顯示時(shí)鐘，并在時(shí)鐘為零時(shí)停止時(shí)鐘

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

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

然后，我們將編寫一個(gè)函數(shù)，在新的div中輸出時(shí)鐘數(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ù)有兩個(gè)參數(shù)，這兩個(gè)參數(shù)是包含時(shí)鐘的元素的id，以及倒計(jì)時(shí)的結(jié)束時(shí)間。在函數(shù)內(nèi)部，我們將聲明一個(gè) clock  變量，并使用它來保存對(duì)時(shí)鐘容器div的引用。這意味著我們不必一直查詢DOM。

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

• 計(jì)算剩余時(shí)間。

• 將剩余時(shí)間輸出到我們的div。

• 如果剩余時(shí)間為零停止計(jì)時(shí)。

此時(shí)，剩下的唯一步驟是像這樣運(yùn)行時(shí)鐘：

initializeClock('clockdiv', deadline);

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

7.準(zhǔn)備展示你的時(shí)鐘

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

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

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

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

7.1 消除初始延遲

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

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

在你的JavaScript中，替換這個(gè)

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

7.2 避免不斷重建時(shí)鐘

我們需要使時(shí)鐘腳本更高效，我們只想更新時(shí)鐘中的數(shù)字，而不是每秒重建整個(gè)時(shí)鐘。實(shí)現(xiàn)此目的的一種方法是將每個(gè)數(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)在時(shí)鐘不再每秒都在重建，我們還有另一件事要做：添加前導(dǎo)零。例如，不是讓時(shí)鐘顯示7秒，而是顯示07秒。一種簡(jiǎn)單的方法是在一個(gè)數(shù)的開頭加上一串“0”，然后切掉最后兩個(gè)數(shù)字。

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

secondsSpan.innerHTML = t.seconds;

為

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

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

8.更進(jìn)一步

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

8.1 自動(dòng)調(diào)節(jié)時(shí)鐘

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

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

clock.style.display = 'block';

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

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

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

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

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

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

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

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

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

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

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

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

8.3 跨頁(yè)面保持時(shí)鐘進(jìn)度

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

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

這是邏輯：

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

如果不存在Cookie，請(qǐng)?jiān)O(shè)置一個(gè)新的截止日期并將其存儲(chǔ)在Cookie中。

要實(shí)現(xiàn)這一點(diǎn)，請(qǐng)使用以下命令替換 deadline 變量：

let deadline;  // 如果有一個(gè)名為myClock的cookie，則使用該值作為截止日期 if(document.cookie && document.cookie.match('myClock')){   // 從Cookie獲取截止日期值   deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2]; } else {   // 否則，請(qǐng)?jiān)O(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);    // 將截止日期存儲(chǔ)在cookie中以供將來引用   document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com'; }

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

讀到這里，這篇“JavaScript如何構(gòu)建一個(gè)倒數(shù)計(jì)時(shí)器”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。