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

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

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

欲深入了解JavaScript，請閱讀我們的書籍《JavaScript: Novice to Ninja, 2nd Edition》。

關鍵要點

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

基本時鐘：倒計時到特定日期或時間

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

• 設置有效的結束日期。
• 計算剩余時間。
• 將時間轉換為可用格式。
• 將時鐘數(shù)據(jù)輸出為可重用的對象。
• 在頁面上顯示時鐘，并在達到零時停止時鐘。

設置有效的結束日期

首先，您需要設置一個有效的結束日期。這應該是一個字符串，可以使用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';

您可以在本文中閱讀更多關于JavaScript日期格式的信息。

計算剩余時間

下一步是計算剩余時間。我們需要編寫一個函數(shù)，該函數(shù)接受表示給定結束時間（如上所述）的字符串。然后，我們計算該時間與當前時間之間的差值。如下所示：

const deadline = '2015-12-31';

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

const deadline = '31/12/2015';

將時間轉換為可用格式

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

const deadline = 'December 31 2015';

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

1. 將毫秒除以1000轉換為秒：(t/1000)
2. 將總秒數(shù)除以60并獲取余數(shù)。您不需要所有秒數(shù)，只需要計算分鐘后剩余的秒數(shù)：(t/1000) % 60
3. 將其四舍五入到最接近的整數(shù)。這是因為您需要完整的秒數(shù)，而不是秒數(shù)的小數(shù)部分：Math.floor( (t/1000) % 60 )

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

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

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

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

此對象允許您調(diào)用您的函數(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
  };
}

方便吧？

顯示時鐘并在達到零時停止它

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

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

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

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

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

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

• 計算剩余時間。
• 將剩余時間輸出到我們的div。
• 如果剩余時間達到零，則停止時鐘。

此時，唯一剩下的步驟是運行時鐘，如下所示：

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

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

準備顯示您的時鐘

在設置時鐘樣式之前，我們需要稍微改進一下。

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

刪除初始延遲

在時鐘中，我們使用setInterval每秒更新顯示。這在大多數(shù)情況下都沒問題，但在開始時，將有一秒鐘的延遲。要刪除此延遲，我們必須在間隔開始之前更新一次時鐘。

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

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

const deadline = '2015-12-31';

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

const deadline = '31/12/2015';

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

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

這是HTML：

const deadline = 'December 31 2015';

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

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

接下來，我們需要更改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
  };
}

添加前導零

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

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

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

為此：

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

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

注意：您可能需要在CodePen中單擊“重新運行”才能啟動倒計時。

更進一步

以下示例演示了如何針對某些用例擴展時鐘。它們都基于上面看到的基本示例。

自動調(diào)度時鐘

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

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

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

接下來，我們可以指定時鐘應該顯示的日期范圍。這將替換deadline變量：

const deadline = '2015-12-31';

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

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

const deadline = '31/12/2015';

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

在用戶到達時設置10分鐘的計時器

可能需要在用戶到達或開始特定任務后為給定時間量設置倒計時。我們將在這里設置一個10分鐘的計時器，但您可以使用任何您想要的時間量。

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

const deadline = 'December 31 2015';

此代碼獲取當前時間并添加十分鐘。值轉換為毫秒，因此可以將它們加在一起并轉換為新的截止日期。

現(xiàn)在我們有一個時鐘，它從用戶到達時開始倒計時十分鐘。隨意嘗試不同的時間長度。

跨頁面維護時鐘進度

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

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

這是邏輯：

1. 如果在cookie中記錄了截止日期，則使用該截止日期。
2. 如果cookie不存在，則設置新的截止日期并將其存儲在cookie中。

要實現(xiàn)這一點，請用以下內(nèi)容替換deadline變量：

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

此代碼使用了cookie和正則表達式，兩者都是各自的單獨主題。因此，我不會在這里詳細介紹。需要注意的一點是，您需要將.yourdomain.com更改為您實際的域名。

關于客戶端時間的另一個重要警告

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

從服務器獲取時間后，我們可以使用本教程中的相同技術來處理它。

總結

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

接下來的步驟

嘗試使用您的時鐘代碼。嘗試添加一些創(chuàng)意樣式或新功能（例如暫停和恢復按鈕）。之后，如果您想分享任何很酷的時鐘示例，請在論壇上告訴我們。

關于在JavaScript中使用時間和日期的常見問題

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

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

在JavaScript中處理時區(qū)的推薦方法是什么？最好盡可能使用UTC時間來避免時區(qū)問題。當向用戶顯示時間時，請考慮使用toLocaleString方法以及使用timeZone選項指定所需的時區(qū)。

如何在JavaScript中計算兩個日期之間的差值？您可以減去兩個Date對象以獲得以毫秒為單位的時間間隔，然后使用數(shù)學運算將其轉換為天、小時、分鐘等。

我可以在JavaScript中輕松操作日期嗎？是的，JavaScript提供了一些方法來向日期添加和減去時間間隔。Date對象具有setFullYear、setMonth、setDate等方法，用于日期操作。

以上是在僅18行JavaScript中構建倒計時計時器的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！