[[329697]]

 

前言

有時，您將需要構建一個JavaScript倒數時鐘。您可能有活動，銷售，促銷或游戲。您可以使用原始JavaScript構建時鐘，而不用尋找最近的插件。雖然有很多很棒的時鐘插件，但是使用原始JavaScript可以帶來以下好處：

• 您的代碼將是輕量級的，因為它將具有零依賴性。
• 您的網站將表現更好。您無需加載外部腳本和樣式表。
• 您將擁有更多控制權。您將構建時鐘，使其行為完全符合您希望的方式(而不是嘗試將插件彎曲到您的意愿)。

因此，事不宜遲，這里介紹了如何僅用18行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'; 

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

計算剩余時間

下一步是計算剩余時間。我們需要編寫一個函數，該函數需要一個表示給定結束時間的字符串(如上所述)。然后，我們計算該時間與當前時間之間的時差。看起來像這樣：

 

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

將時間轉換為可用格式

現在，我們要將毫秒轉換為天，小時，分鐘和秒。讓我們以秒為例：

 

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

讓我們分解一下這里發生的事情。

1. 將毫秒除以1000可轉換為秒： (t/1000)
2. 將總秒數除以60，然后取余數。您不希望所有的秒數，僅需要計算分鐘數之后剩下的秒數：(t/1000) % 60
3. 四舍五入到最接近的整數。這是因為您需要完整的秒數，而不是幾分之一秒：Math.floor( (t/1000) % 60 )

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

輸出時鐘數據作為可重用對象

準備好幾天，幾小時，幾分鐘和幾秒鐘之后，我們現在可以將數據作為可重用的對象返回：

 

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

該對象允許您調用函數并獲取任何計算值。這是如何獲取剩余時間的示例：

 

getTimeRemaining(deadline).minutes 

方便吧?

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

現在，我們有了一個可以花費剩余的天，小時，分鐘和秒的功能，我們可以構建時鐘了。首先，我們將創建以下HTML元素來保存時鐘：

 

 

然后，我們將編寫一個在新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就擁有了一個基本時鐘。

準備顯示時鐘

在設置時鐘樣式之前，我們需要進行一些細化。

• 消除初始延遲，使您的時鐘立即顯示。
• 提高時鐘腳本的效率，以免持續重建整個時鐘。
• 根據需要添加前導零。

消除初始延遲

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

讓我們將要傳遞給setInterval它的匿名函數移到其自己的獨立函數中。我們可以命名這個函數updateClock。在updateClock外部調用該函數setInterval，然后在內部再次調用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(); // run function once at first to avoid delay 
var timeinterval = setInterval(updateClock,1000); 

避免持續重建時鐘

我們需要使時鐘腳本更高效。我們只想更新時鐘中的數字，而不是每秒重新構建整個時鐘。實現此目的的一種方法是將每個數字放在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秒，而是顯示07秒。一種簡單的方法是在數字的開頭添加字符串“ 0”，然后切掉最后兩位數字。

例如，要在“ seconds”值上添加前導零，您可以對此進行更改：

 

secondsSpan.innerHTML = t.seconds; 

對此：

 

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

如果需要，您也可以在分鐘和小時中添加前導零。如果您走了這么遠，恭喜!您的時鐘現在可以顯示了。

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

更進一步

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

自動安排時鐘

假設我們希望時鐘顯示在某些日子，而不是其他日子。例如，我們可能會發生一系列事件，并且不想每次都手動更新時鐘。這是提前安排事情的方法。

通過在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函數的調用。

 

// iterate over each element in the schedule 
for (var i=0; i<schedule.length; i++) { 
  var startDate = schedule[i][0]; 
  var endDate = schedule[i][1]; 
 
  // put dates in milliseconds for easy comparisons 
  var startMs = Date.parse(startDate); 
  var endMs = Date.parse(endDate); 
  var currentMs = Date.parse(new Date()); 
 
  // if current date is between start and end dates, display clock 
  if (endMs > currentMs && currentMs >= startMs ) { 
    initializeClock('clockdiv', endDate); 
  } 
} 
 
schedule.forEach(([startDate, endDate]) => { 
  // put dates in milliseconds for easy comparisons 
  const startMs = Date.parse(startDate); 
  const endMs = Date.parse(endDate); 
  const currentMs = Date.parse(new Date()); 
 
  // if current date is between start and end dates, display clock 
  if (endMs > currentMs && currentMs >= startMs ) { 
    initializeClock('clockdiv', endDate); 
  } 
}); 

現在，您可以提前安排時鐘，而無需手動更新。您可以根據需要縮短代碼。為了便于閱讀，我讓我變得冗長。

從用戶到達起將計時器設置為10分鐘

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

我們需要做的就是deadline用這個替換變量：

 

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

該代碼將花費當前時間，并增加十分鐘。這些值將轉換為毫秒，因此可以將它們加在一起并變成新的截止日期。

現在，我們有了一個時鐘，可以從用戶到達時開始倒數十分鐘。隨意玩耍，嘗試不同的時間長度。

跨頁面保持時鐘進度

有時，有必要將時鐘狀態保留的時間不僅限于當前頁面。如果我們想在整個網站上設置10分鐘的計時器，則我們不希望在用戶轉到其他頁面時將其重置。

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

這是邏輯：

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

如果不存在該cookie，則設置一個新的截止日期并將其存儲在cookie中。

要實現這一點，請用deadline以下內容替換變量：

 

let deadline; 
 
// if there's a cookie with the name myClock, use that value as the deadline 
if(document.cookie && document.cookie.match('myClock')){ 
  // get deadline value from cookie 
  deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2]; 
} else { 
  // otherwise, set a deadline 10 minutes from now and  
  // save it in a cookie with that name 
 
  // create deadline 10 minutes from now 
  const timeInMinutes = 10; 
  const currentTime = Date.parse(new Date()); 
  deadline = new Date(currentTime + timeInMinutes*60*1000); 
 
  // store deadline in cookie for future reference 
  document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com'; 
} 

這段代碼利用了cookie和正則表達式，它們本身就是單獨的主題。因此，我在這里不再贅述。需要注意的一件事是，您需要更改.yourdomain.com為實際域。

有關客戶端事件的重要警告

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

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

加起來

閱讀完本文中的示例之后，您現在知道如何僅用幾行原始JavaScript代碼創建自己的倒數計時器!我們已經研究了如何制作基本的倒數時鐘并有效顯示它。我們還介紹了添加一些有用的附加功能，包括計劃，絕對時間和相對時間，以及使用Cookie保留頁面和站點訪問之間的狀態。

完整代碼

<!DOCTYPE html> 
<html lang="zh"> 
<head> 
<meta charset="UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
<title>Countdown Clock</title> 
<style type="text/css"> 
  body{ 
    text-align: center; 
    background: #00ECB9; 
  font-family: sans-serif; 
  font-weight: 100; 
} 
 
h1{ 
  color: #396; 
  font-weight: 100; 
  font-size: 40px; 
  margin: 40px 0px 20px; 
} 
 
#clockdiv{ 
    font-family: sans-serif; 
    color: #fff; 
    display: inline-block; 
    font-weight: 100; 
    text-align: center; 
    font-size: 30px; 
} 
 
#clockdiv > div{ 
    padding: 10px; 
    border-radius: 3px; 
    background: #00BF96; 
    display: inline-block; 
} 
 
#clockdiv div > span{ 
    padding: 15px; 
    border-radius: 3px; 
    background: #00816A; 
    display: inline-block; 
} 
 
.smalltext{ 
    padding-top: 5px; 
    font-size: 16px; 
} 
  </style> 
</head> 
<body> 
    <h1>Countdown Clock</h1> 
<div id="clockdiv"> 
  <div> 
    <span class="days"></span> 
    <div class="smalltext">Days</div> 
  </div> 
  <div> 
    <span class="hours"></span> 
    <div class="smalltext">Hours</div> 
  </div> 
  <div> 
    <span class="minutes"></span> 
    <div class="smalltext">Minutes</div> 
  </div> 
  <div> 
    <span class="seconds"></span> 
    <div class="smalltext">Seconds</div> 
  </div> 
</div> 
<script type="text/javascript"> 
  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 
  }; 
} 
 
function initializeClock(id, endtime) { 
  const clock = document.getElementById(id); 
  const daysSpan = clock.querySelector('.days'); 
  const hoursSpan = clock.querySelector('.hours'); 
  const minutesSpan = clock.querySelector('.minutes'); 
  const secondsSpan = clock.querySelector('.seconds'); 
 
  function updateClock() { 
    const t = getTimeRemaining(endtime); 
 
    daysSpan.innerHTML = t.days; 
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2); 
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); 
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); 
 
    if (t.total <= 0) { 
      clearInterval(timeinterval); 
    } 
  } 
 
  updateClock(); 
  const timeinterval = setInterval(updateClock, 1000); 
} 
 
const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); 
initializeClock('clockdiv', deadline); 
</script> 
</body> 
</html>