丰满爆乳一区二区三区,99久久99久久精品免费看蜜桃,成人无码午夜在线观看

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

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

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

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

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

首先，您需要設(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';

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

計算剩餘時間

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

const deadline = '2015-12-31';

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

const deadline = '31/12/2015';

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

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

const deadline = 'December 31 2015';

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

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

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

將時鐘數(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ù)可以輸出剩餘的天、小時、分鐘和秒，我們可以構(gòu)建我們的時鐘。首先，我們將創(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和倒計時的結(jié)束時間。在函數(shù)內(nèi)部，我們將聲明一個clock變量並使用它來存儲對我們的時鐘容器div的引用。這意味著我們不必不斷查詢DOM。

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

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

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

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

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

準備顯示您的時鐘

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

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

刪除初始延遲

在時鐘中，我們使用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>標(biāo)籤內(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
  };
}

添加前導(dǎo)零

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

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

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

為此：

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

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

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

更進一步

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

自動調(diào)度時鐘

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

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

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

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

const deadline = '2015-12-31';

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

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

const deadline = '31/12/2015';

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

在用戶到達時設(shè)置10分鐘的計時器

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

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

const deadline = 'December 31 2015';

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

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

跨頁面維護時鐘進度

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

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

這是邏輯：

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

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

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

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

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

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

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

總結(jié)

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