構(gòu)建JavaScript倒計(jì)時(shí)時(shí)鐘有時(shí)是必要的，無(wú)論是活動(dòng)、促銷還是遊戲。您可以使用原生JavaScript構(gòu)建時(shí)鐘，而無(wú)需依賴任何插件。雖然有很多優(yōu)秀的時(shí)鐘插件，但使用原生JavaScript具有以下優(yōu)勢(shì)：

• 代碼輕量級(jí)，零依賴。
• 網(wǎng)站性能更好，無(wú)需加載外部腳本和樣式表。
• 擁有更多控制權(quán)，您可以精確控制時(shí)鐘的行為，而無(wú)需嘗試彎曲插件以符合您的需求。

以下是如何用短短18行JavaScript代碼創(chuàng)建自己的倒計(jì)時(shí)時(shí)鐘：

欲深入了解JavaScript，請(qǐng)閱讀我們的書(shū)籍《JavaScript: Novice to Ninja, 2nd Edition》。

關(guān)鍵要點(diǎn)

• 您可以使用JavaScript構(gòu)建輕量級(jí)且高效的倒計(jì)時(shí)時(shí)鐘，無(wú)需任何依賴項(xiàng)，從而提供更好的性能和控制，而無(wú)需加載外部腳本和樣式表。
• 此過(guò)程包括設(shè)置有效的結(jié)束日期、計(jì)算剩餘時(shí)間、將時(shí)間轉(zhuǎn)換為可用格式、將時(shí)鐘數(shù)據(jù)輸出為可重用的對(duì)象，以及在頁(yè)面上顯示時(shí)鐘，並在達(dá)到零時(shí)停止它。
• 您可以通過(guò)刪除初始延遲、僅更新時(shí)鐘中的數(shù)字以提高腳本效率以及根據(jù)需要添加前導(dǎo)零來(lái)優(yōu)化時(shí)鐘顯示效果。
• 對(duì)於某些用例，可以擴(kuò)展時(shí)鐘，例如自動(dòng)調(diào)度時(shí)鐘、在用戶到達(dá)時(shí)為特定時(shí)間設(shè)置計(jì)時(shí)器以及通過(guò)將時(shí)鐘的結(jié)束時(shí)間保存在cookie中來(lái)跨頁(yè)面維護(hù)時(shí)鐘進(jìn)度。
• 需要記住一個(gè)重要的警告：JavaScript日期和時(shí)間取自用戶的計(jì)算機(jī)，這意味著用戶可以通過(guò)更改其計(jì)算機(jī)上的時(shí)間來(lái)影響JavaScript時(shí)鐘。在極其敏感的情況下，可能需要從服務(wù)器獲取時(shí)間。

基本時(shí)鐘：倒計(jì)時(shí)到特定日期或時(shí)間

創(chuàng)建基本時(shí)鐘涉及以下步驟：

• 設(shè)置有效的結(jié)束日期。
• 計(jì)算剩餘時(shí)間。
• 將時(shí)間轉(zhuǎn)換為可用格式。
• 將時(shí)鐘數(shù)據(jù)輸出為可重用的對(duì)象。
• 在頁(yè)面上顯示時(shí)鐘，並在達(dá)到零時(shí)停止時(shí)鐘。

設(shè)置有效的結(jié)束日期

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

ISO 8601格式：

const deadline = '2015-12-31';

簡(jiǎn)短格式：

const deadline = '31/12/2015';

或長(zhǎng)格式：

const deadline = 'December 31 2015';

每種格式都允許您指定確切的時(shí)間和時(shí)區(qū)（或者在ISO日期的情況下指定與UTC的偏移量）。例如：

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

您可以在本文中閱讀更多關(guān)於JavaScript日期格式的信息。

計(jì)算剩餘時(shí)間

下一步是計(jì)算剩餘時(shí)間。我們需要編寫(xiě)一個(gè)函數(shù)，該函數(shù)接受表示給定結(jié)束時(shí)間（如上所述）的字符串。然後，我們計(jì)算該時(shí)間與當(dāng)前時(shí)間之間的差值。如下所示：

const deadline = '2015-12-31';

首先，我們創(chuàng)建一個(gè)變量total來(lái)保存截止日期之前的剩餘時(shí)間。 Date.parse()函數(shù)將時(shí)間字符串轉(zhuǎn)換為以毫秒為單位的值。這允許我們從彼此中減去兩個(gè)時(shí)間並獲得兩者之間的時(shí)間量。

const deadline = '31/12/2015';

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

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

const deadline = 'December 31 2015';

讓我們分解一下這裡發(fā)生了什麼。

1. 將毫秒除以1000轉(zhuǎn)換為秒：(t/1000)
2. 將總秒數(shù)除以60並獲取餘數(shù)。您不需要所有秒數(shù)，只需要計(jì)算分鐘後剩餘的秒數(shù)：(t/1000) % 60
3. 將其四捨五入到最接近的整數(shù)。這是因?yàn)槟枰暾拿霐?shù)，而不是秒數(shù)的小數(shù)部分：Math.floor( (t/1000) % 60 )

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

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

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

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

此對(duì)象允許您調(diào)用您的函數(shù)並獲取任何計(jì)算值。以下是如何獲取剩餘分鐘的示例：

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

方便吧？

顯示時(shí)鐘並在達(dá)到零時(shí)停止它

現(xiàn)在我們有一個(gè)函數(shù)可以輸出剩餘的天、小時(shí)、分鐘和秒，我們可以構(gòu)建我們的時(shí)鐘。首先，我們將創(chuàng)建以下HTML元素來(lái)保存我們的時(shí)鐘：

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

然後，我們將編寫(xiě)一個(gè)函數(shù)，該函數(shù)將時(shí)鐘數(shù)據(jù)輸出到我們的新div中：

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

此函數(shù)採(cǎi)用兩個(gè)參數(shù)。它們是包含我們時(shí)鐘的元素的id和倒計(jì)時(shí)的結(jié)束時(shí)間。在函數(shù)內(nèi)部，我們將聲明一個(gè)clock變量並使用它來(lái)存儲(chǔ)對(duì)我們的時(shí)鐘容器div的引用。這意味著我們不必不斷查詢DOM。

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

• 計(jì)算剩餘時(shí)間。
• 將剩餘時(shí)間輸出到我們的div。
• 如果剩餘時(shí)間達(dá)到零，則停止時(shí)鐘。

此時(shí)，唯一剩下的步驟是運(yùn)行時(shí)鐘，如下所示：

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

恭喜！您現(xiàn)在只需18行JavaScript代碼即可擁有一個(gè)基本時(shí)鐘。

準(zhǔn)備顯示您的時(shí)鐘

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

• 刪除初始延遲，以便您的時(shí)鍾立即顯示。
• 使時(shí)鐘腳本更高效，以便它不會(huì)連續(xù)重建整個(gè)時(shí)鐘。
• 根據(jù)需要添加前導(dǎo)零。

刪除初始延遲

在時(shí)鐘中，我們使用setInterval每秒更新顯示。這在大多數(shù)情況下都沒(méi)問(wèn)題，但在開(kāi)始時(shí)，將有一秒鐘的延遲。要?jiǎng)h除此延遲，我們必須在間隔開(kāi)始之前更新一次時(shí)鐘。

讓我們將傳遞給setInterval的匿名函數(shù)移到它自己的單獨(dú)函數(shù)中。我們可以將此函數(shù)命名為updateClock。在setInterval之外調(diào)用一次updateClock函數(shù)，然後在setInterval內(nèi)部再次調(diào)用它。這樣，時(shí)鐘就會(huì)在沒(méi)有延遲的情況下顯示出來(lái)。

在您的JavaScript中，替換以下內(nèi)容：

const deadline = '2015-12-31';

使用以下內(nèi)容：

const deadline = '31/12/2015';

避免連續(xù)重建時(shí)鐘

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

這是HTML：

const deadline = 'December 31 2015';

現(xiàn)在讓我們獲取對(duì)這些元素的引用。在定義clock變量之後添加以下代碼

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

接下來(lái)，我們需要更改updateClock函數(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
  };
}

添加前導(dǎo)零

現(xiàn)在時(shí)鐘不再每秒重建，我們還有一件事要做：添加前導(dǎo)零。例如，時(shí)鐘不會(huì)顯示7秒，而是顯示07秒。一種簡(jiǎn)單的方法是在數(shù)字的開(kāi)頭添加一個(gè)“0”字符串，然後切掉最後兩位數(shù)字。

例如，要向“seconds”值添加前導(dǎo)零，您將更改以下內(nèi)容：

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

為此：

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

如果您願(yuàn)意，也可以向分鐘和小時(shí)添加前導(dǎo)零。如果您走到這一步，恭喜！您的時(shí)鐘現(xiàn)在可以顯示了。

注意：您可能需要在CodePen中單擊“重新運(yùn)行”才能啟動(dòng)倒計(jì)時(shí)。

更進(jìn)一步

以下示例演示瞭如何針對(duì)某些用例擴(kuò)展時(shí)鐘。它們都基於上面看到的基本示例。

自動(dòng)調(diào)度時(shí)鐘

假設(shè)我們希望時(shí)鐘在某些日子顯示，而在其他日子不顯示。例如，我們可能有一系列即將到來(lái)的活動(dòng)，並且不想每次都手動(dòng)更新時(shí)鐘。以下是如何提前安排事情。

通過(guò)將時(shí)鐘的display屬性設(shè)置為none來(lái)隱藏時(shí)鐘。然後將以下內(nèi)容添加到initializeClock函數(shù)（在以var clock開(kāi)頭的行之後）。這將導(dǎo)致時(shí)鐘僅在調(diào)用initializeClock函數(shù)後顯示：

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

接下來(lái)，我們可以指定時(shí)鐘應(yīng)該顯示的日期範(fàn)圍。這將替換deadline變量：

const deadline = '2015-12-31';

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

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

const deadline = '31/12/2015';

現(xiàn)在，您可以提前安排時(shí)鐘，而無(wú)需手動(dòng)更新它。您可以根據(jù)需要縮短代碼。為了可讀性，我使我的代碼冗長(zhǎng)。

在用戶到達(dá)時(shí)設(shè)置10分鐘的計(jì)時(shí)器

可能需要在用戶到達(dá)或開(kāi)始特定任務(wù)後為給定時(shí)間量設(shè)置倒計(jì)時(shí)。我們將在這裡設(shè)置一個(gè)10分鐘的計(jì)時(shí)器，但您可以使用任何您想要的時(shí)間量。

我們只需要用以下內(nèi)容替換deadline變量：

const deadline = 'December 31 2015';

此代碼獲取當(dāng)前時(shí)間並添加十分鐘。值轉(zhuǎn)換為毫秒，因此可以將它們加在一起並轉(zhuǎn)換為新的截止日期。

現(xiàn)在我們有一個(gè)時(shí)鐘，它從用戶到達(dá)時(shí)開(kāi)始倒計(jì)時(shí)十分鐘。隨意嘗試不同的時(shí)間長(zhǎng)度。

跨頁(yè)面維護(hù)時(shí)鐘進(jìn)度

有時(shí)需要保存時(shí)鐘的狀態(tài)，而不僅僅是當(dāng)前頁(yè)面。如果我們想在整個(gè)網(wǎng)站上設(shè)置一個(gè)10分鐘的計(jì)時(shí)器，我們不希望它在用戶轉(zhuǎn)到不同的頁(yè)面時(shí)重置。

一種解決方案是將時(shí)鐘的結(jié)束時(shí)間保存在cookie中。這樣，導(dǎo)航到新頁(yè)面就不會(huì)將結(jié)束時(shí)間重置為從現(xiàn)在起十分鐘。

這是邏輯：

1. 如果在cookie中記錄了截止日期，則使用該截止日期。
2. 如果cookie不存在，則設(shè)置新的截止日期並將其存儲(chǔ)在cookie中。

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

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

此代碼使用了cookie和正則表達(dá)式，兩者都是各自的單獨(dú)主題。因此，我不會(huì)在這裡詳細(xì)介紹。需要注意的一點(diǎn)是，您需要將.yourdomain.com更改為您實(shí)際的域名。

關(guān)於客戶端時(shí)間的另一個(gè)重要警告

JavaScript日期和時(shí)間取自用戶的計(jì)算機(jī)。這意味著用戶可以通過(guò)更改其計(jì)算機(jī)上的時(shí)間來(lái)影響JavaScript時(shí)鐘。在大多數(shù)情況下，這無(wú)關(guān)緊要。但在某些極其敏感的情況下，需要從服務(wù)器獲取時(shí)間。這可以使用一些PHP或Ajax來(lái)完成，這超出了本教程的範(fàn)圍。

從服務(wù)器獲取時(shí)間後，我們可以使用本教程中的相同技術(shù)來(lái)處理它。

總結(jié)

在完成本文中的示例後，您現(xiàn)在知道如何僅使用少量原生JavaScript代碼創(chuàng)建自己的倒計(jì)時(shí)計(jì)時(shí)器！我們已經(jīng)了解瞭如何製作基本的倒計(jì)時(shí)時(shí)鐘並高效地顯示它。我們還介紹了一些有用的附加功能，包括調(diào)度、絕對(duì)時(shí)間與相對(duì)時(shí)間以及使用cookie在頁(yè)面和網(wǎng)站訪問(wèn)之間保存狀態(tài)。

接下來(lái)的步驟

嘗試使用您的時(shí)鐘代碼。嘗試添加一些創(chuàng)意樣式或新功能（例如暫停和恢復(fù)按鈕）。之後，如果您想分享任何很酷的時(shí)鐘示例，請(qǐng)?jiān)谡搲细嬖V我們。

關(guān)於在JavaScript中使用時(shí)間和日期的常見(jiàn)問(wèn)題

如何在JavaScript中獲取當(dāng)前日期和時(shí)間？您可以使用Date對(duì)象獲取當(dāng)前日期和時(shí)間。只需創(chuàng)建一個(gè)沒(méi)有參數(shù)的Date的新實(shí)例，它將表示當(dāng)前日期和時(shí)間。

JavaScript中常見(jiàn)的日期和時(shí)間操作有哪些？常見(jiàn)的操作包括格式化日期、解析日期字符串、計(jì)算時(shí)間間隔、添加或減去時(shí)間以及比較日期。

在JavaScript中處理時(shí)區(qū)的推薦方法是什麼？最好盡可能使用UTC時(shí)間來(lái)避免時(shí)區(qū)問(wèn)題。當(dāng)向用戶顯示時(shí)間時(shí)，請(qǐng)考慮使用toLocaleString方法以及使用timeZone選項(xiàng)指定所需的時(shí)區(qū)。

如何在JavaScript中計(jì)算兩個(gè)日期之間的差值？您可以減去兩個(gè)Date對(duì)像以獲得以毫秒為單位的時(shí)間間隔，然後使用數(shù)學(xué)運(yùn)算將其轉(zhuǎn)換為天、小時(shí)、分鐘等。

我可以在JavaScript中輕鬆操作日期嗎？是的，JavaScript提供了一些方法來(lái)向日期添加和減去時(shí)間間隔。 Date對(duì)象具有setFullYear、setMonth、setDate等方法，用於日期操作。

以上是在僅18行JavaScript中構(gòu)建倒計(jì)時(shí)計(jì)時(shí)器的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！