如何使用HTML，CSS和JavaScript創建動畫倒計時計時器

您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然地訪問一個插件，但是製作一個比您想像的要直接得多，而且只需要HTML，CSS和JavaScript的Trifecta。讓我們一起做一個吧！

這就是我們的目標：

這是計時器所做的一些事情，我們將在這篇文章中介紹：

• 顯示剩餘的初始時間
• 將時間值轉換為MM：SS格式
• 計算剩餘的初始時間與已經過去多的時間之間的差異
• 隨著時間的剩餘時間而變化顏色
• 顯示作為動畫戒指的時間的進度

好的，這就是我們想要的，所以讓我們實現它！

步驟1：從基本標記和样式開始

讓我們從為計時器創建基本模板開始。我們將在內部添加一個帶有圓元素的SVG，以繪製一個計時器環，該計時器環將指示傳遞時間並添加一個跨度以顯示剩餘時間值。請注意，我們正在用JavaScript編寫HTML，並通過定位#APP元素將HTML注射到DOM中。當然，如果這是您的事，我們可以將其中的很多移至HTML文件中。

 document.getElementById（“ app”）.InnerHtml =`
<div>
  <svg viewbox="“" xmlns="“" http:>
    <g>
      <circle cx="“" cy="“" r="“"></circle>
    </g>
  </svg>
  <span>
    
  </span>
</div>
`;

現在，我們可以使用一些標記，讓我們進行一些樣式，這樣我們就可以使用一個很好的視覺效果。具體來說，我們要：

• 設置計時器的大小
• 從圓圈包裝元件中刪除填充和筆觸，以便我們獲得形狀，但讓經過的時間顯示
• 設置戒指的寬度和顏色

/ *設置容器的高度和寬度 */
.base-timer {
  位置：相對；
  身高：300px;
  寬度：300px;
}

/ *刪除將隱藏時間標籤的SVG樣式 */
.base-timer__circle {
  填充：無；
  中風：沒有；
}

/ *顯示計時器進度的SVG路徑 */
.base-timer__path-path {
  中風寬度：7px;
  中風：灰色；
}

這樣做，我們最終得到了一個看起來像這樣的基本模板。

步驟2：設置時間標籤

您可能注意到，該模板包含一個空的，它將保留剩餘的時間。我們將以適當的價值填充該地方。我們之前說過的時間將是MM：SS格式。為此，我們將創建一種稱為formattimeleft的方法：

函數formatattimeleft（time）{
  //最大的圓形整數小於或等於時間的結果除以60。
  const分鐘= Math.floor（Time / 60）;
  
  //秒是剩餘時間除以60（模量運算符）
  令秒=時間％60;
  
  //如果秒的值小於10，則顯示為零領先的秒
  如果（秒<p>然後，我們將在模板中使用我們的方法：</p><pre rel="JavaScript" data-line="9"> document.getElementById（“ app”）.InnerHtml =`
<div>
  <svg viewbox="“" xmlns="“" http:>
    <g>
      <circle cx="“" cy="“" r="“"> </circle>
    </g>
  </svg>
  <span>
    $ {formattime（timeleft）}
  </span>
</div>
`

為了顯示戒指內的值，我們需要稍微更新樣式。

 .base-timer__label {
  位置：絕對；
  
  / *大小應與父容器匹配 */
  寬度：300px;
  身高：300px;
  
  / *將標籤對齊到頂部 */
  頂部：0;
  
  / *創建一個靈活的盒子，以垂直和水平的內容為中心 */
  顯示：Flex;
  準項目：中心；
  Jusify-content：中心；

  /*一種任意號碼；適應您的喜好 */
  字體大小：48px;
}

好的，我們準備使用Timeleft值，但是該值還不存在。讓我們創建它並將初始值設置為我們的時間限制。

 //從20秒開始的初始值開始
const time_limit = 20;

//最初，沒有時間已經過去了，但這會計算
//從time_limit減去
讓時間超過= 0;
令timeleft = time_limit;

我們距離近一步。

就在現在，我們有一個計時器，該計時器從20秒開始……但是目前還沒有任何計數。讓我們將其栩栩如生，以降低到零秒。

步驟3：倒計時

讓我們考慮一下我們需要計算的時間。目前，我們有一個代表我們初始時間的時間表值，並且一個時間超過的值表示倒計時一旦啟動了多少時間。

我們需要做的是增加每秒一個單位的時間超過一個單位的值，並根據新的時間超過的值重新計算Timeleft值。我們可以使用setInterval函數實現這一目標。

讓我們實現一種稱為startTimer的方法，該方法將：

• 設置計數器間隔
• 每秒增加時間超過的值
• 重新計算Timeleft的新價值
• 在模板中更新標籤值

我們還需要在需要時保留對該間隔對象的引用以清除它 - 這就是為什麼我們將創建一個計時插圖變量的原因。

令timerInterval = null;

document.getElementById（“ app”）。 innerhtml =`...`

函數startTimer（）{
  timerInterval = setInterval（（）=> {
    
    //通過一個時間來增加的時間
    TimePassed = TimePassed = 1;
    timeleft = time_limit-時間超過；
    
    //剩餘標籤已更新
    document.getElementById（“ base-timer-Label”）。 innerhtml = formattime（timeleft）;
  }，1000）;
}

我們有一種啟動計時器的方法，但我們不會在任何地方稱呼它。讓我們立即開始加載計時器。

 document.getElementById（“ app”）。 innerhtml =`...`
startTimer（）;

就是這樣！現在，我們的計時器將計算時間。雖然這太好了，而且如果我們可以在時間標籤上添加一些顏色並在不同的時間值中更改顏色，那就更好了。

步驟4：用另一個戒指蓋住計時器戒指

為了可視化時間傳遞，我們需要在處理動畫的環中添加第二層。我們正在做的實質是將一個新的綠色戒指堆放在原始灰色戒指的頂部，以便綠色的戒指動畫以隨著時間的流逝而露出灰色戒指，就像進度棒一樣。

讓我們首先在我們的SVG元素中添加一個路徑元素。

 document.getElementById（“ app”）.InnerHtml =`
<div>
  <svg viewbox="“" xmlns="“" http:>
    <g>
      <circle cx="“" cy="“" r="“"> </circle>
       
    </g>
  </svg>
  <span>
    $ {formattime（timeleft）}
  </span>
</div>
`;

接下來，讓我們為剩餘時間路徑創建一種初始顏色。

 const color_codes = {
  資訊:{
    顏色：“綠色”
  }
};

令剩餘的PathColor = color_codes.info.color;

最後，讓我們添加一些樣式，使圓形路徑看起來像我們原始的灰色戒指。這裡重要的是要確保寬度與原始環的大小相同，並且過渡的持續時間設置為一秒鐘，以使其動畫順利，並與時間標籤中剩餘的時間相對應。

 .base-timer__path remaining {
  / *與原始環一樣厚 */
  中風寬度：7px;

  / *圓形末端以創建一個無縫圓 */
  中風 - 萊內卡普：圓形；

  / *確保動畫從圓的頂部開始 */
  變換：旋轉（90度）;
  轉化原始：中心；

  / *一秒鐘與倒數計時器的速度對齊 */
  過渡：1S線性；

  / *允許顏色值更新時，戒指可以更改顏色 */
  中風：CurrentColor；
}

.base-timer__svg {
  / *翻轉SVG並使動畫從左到右移動 */
  變換：scalex（-1）;
}

這將輸出覆蓋計時器環的中風，但它並沒有動畫，而只是隨著時間的流逝而揭示了計時器環。

為了使剩餘時間列的長度動畫，我們將使用“衝程 - dasharray屬性”。克里斯（Chris）解釋了它是如何用來創建元素“繪畫”本身的幻想的。在CSS-tricks年鑑中，有關其屬性和示例的詳細信息。

步驟5：動畫進度戒指

讓我們看看我們的戒指的外觀不同，帶有不同的筆觸 - 劃線值：

我們可以看到的是，卒中 - 劃線的值實際上將我們的剩餘時間環切成相等的部分，其中長度是剩餘的時間。當我們將衝程 - 劃線的值設置為單位數字（即1-9）時，這就是發生這種情況。

名稱Dasharray建議我們可以將多個值設置為數組。讓我們看看如果我們設置兩個數字而不是一個數字，它將如何表現；在這種情況下，這些值是10和30。

這將第一部分（剩餘時間）的長度設置為10，第二部分（通過時間）將其設置為30。我們可以在計時器中使用一個小技巧來使用它。最初，我們需要的是覆蓋圓的整個長度，這意味著剩餘時間等於環的長度。

那長度是多少？拿出您的舊幾何教科書，因為我們可以用數學數來計算弧線的長度：

長度=2πr= 2 *π * 45 = 282,6

這就是我們最初安裝的戒指時要使用的值。讓我們看看它的外觀。

那可行！

好的，數組中的第一個值是我們剩餘的時間，第二個值是已經過去了多少時間。我們現在需要做的是操縱第一個價值。讓我們在下面查看更改第一個值時我們可以期望的。

我們將創建兩種方法，一種負責計算剩下的初始時間的分數，另一種負責計算中風 - 劃線值並更新代表我們剩餘時間的元素。

 //將剩下的時間除以定義的時間限制。
函數calculatement fraction（）{
  返回timeleft / time_limit;
}
    
//隨著時間的流逝，更新dasharray值，從283開始
函數setCircledAsharray（）{
  const circledasharray =`$ {（（
    calculateTimeFraction（） * full_dash_array
  ）.tofixed（0）} 283`;
  文件
    .getElementById（“基本 - 教派路徑 - 錄製”）
    .setAttribute（“ crockledAsharray”，“ stroke-dasharray”）；
}

我們還需要每秒通過的路徑來更新我們的路徑。這意味著我們需要在計時界面內調用新創建的setCircleDasharray方法。

函數startTimer（）{
  timerInterval = setInterval（（）=> {
    TimePassed = TimePassed = 1;
    timeleft = time_limit-時間超過；
    document.getElementById（“ base-timer-Label”）。 innerhtml = formattime（timeleft）;
    
    setCircledAshArray（）;
  }，1000）;
}

現在我們可以看到事情在移動！

哇，它有效……但是……仔細觀察，尤其是最後。看來我們的動畫落後了一秒鐘。當我們到達0時，仍然可以看到一小塊戒指。

這是由於動畫的持續時間設置為一秒鐘。當將剩餘時間的值設置為零時，將戒指實際上動畫為零仍然需要一秒鐘。我們可以通過在倒計時逐漸減小環的長度來擺脫這一點。我們在計算時間差異方法中這樣做。

函數calculatement fraction（）{
  const rawTimeFraction = timeleft / time_limit;
  返回rawTimeFraction-（1 / time_limit） *（1- rawTimeFraction）;
}

我們去！

糟糕……還有一件事。我們說，當剩下的時間到達某些點時，我們想更改進度指標的顏色 - 就像讓用戶知道時間幾乎上升了。

步驟6：在某些時間點更改進度顏色

首先，我們需要添加兩個閾值，這些閾值將指示何時應該更改警告並提醒狀態，並為每個狀態添加顏色。我們從綠色開始，然後去奧蘭治（Orange）作為警告，然後在時間快到時紅色。

 //警告發生在10s
const Warning_threshold = 10;
//警報在5s中發生
const Alert_threshold = 5;

const color_codes = {
  資訊:{
    顏色：“綠色”
  }，，
  警告： {
    顏色：“橙色”，
    閾值：Warning_threshold
  }，，
  警報： {
    顏色：“紅色”，
    閾值：alert_threshold
  }
};

現在，讓我們創建一種方法，該方法負責檢查閾值是否超過閾值並在發生這種情況時更改進度顏色。

函數setRemainingPathColor（timeleft）{
  const {警報，警告，info} = color_codes;

  //如果剩餘時間小於或等於5，請刪除“警告”類並應用“警報”類。
  if（timeleft <p>因此，當計時器達到點並在其位置添加另一個時，我們基本上正在刪除一個CSS課程。我們將需要定義這些課程。</p><pre rel="CSS" data-line=""> .base-timer__path-remaining.green {
  顏色：RGB（65，184，131）;
}

.base-timer__path-remaining.Orange {
  顏色：橙色；
}

.base-timer__path-remain.red {
  顏色：紅色；
}

瞧，我們有。這再次是演示，一切都放在一起。

以上是如何使用HTML，CSS和JavaScript創建動畫倒計時計時器的詳細內容。更多資訊請關注PHP中文網其他相關文章！