您是否曾經(jīng)在項(xiàng)目上需要一個(gè)倒計(jì)時(shí)計(jì)時(shí)器？對(duì)于這樣的東西，可以自然地訪問一個(gè)插件，但是制作一個(gè)比您想象的要直接得多，而且只需要HTML，CSS和JavaScript的Trifecta。讓我們一起做一個(gè)吧！

這就是我們的目標(biāo)：

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

• 顯示剩余的初始時(shí)間
• 將時(shí)間值轉(zhuǎn)換為MM：SS格式
• 計(jì)算剩余的初始時(shí)間與已經(jīng)過去多的時(shí)間之間的差異
• 隨著時(shí)間的剩余時(shí)間而變化顏色
• 顯示作為動(dòng)畫戒指的時(shí)間的進(jìn)度

好的，這就是我們想要的，所以讓我們實(shí)現(xiàn)它！

步驟1：從基本標(biāo)記和樣式開始

讓我們從為計(jì)時(shí)器創(chuàng)建基本模板開始。我們將在內(nèi)部添加一個(gè)帶有圓元素的SVG，以繪制一個(gè)計(jì)時(shí)器環(huán)，該計(jì)時(shí)器環(huán)將指示傳遞時(shí)間并添加一個(gè)跨度以顯示剩余時(shí)間值。請(qǐng)注意，我們正在用JavaScript編寫HTML，并通過定位#APP元素將HTML注射到DOM中。當(dāng)然，如果這是您的事，我們可以將其中的很多移至HTML文件中。

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

現(xiàn)在，我們可以使用一些標(biāo)記，讓我們進(jìn)行一些樣式，這樣我們就可以使用一個(gè)很好的視覺效果。具體來說，我們要：

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

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

/ *刪除將隱藏時(shí)間標(biāo)簽的SVG樣式 */
.base-timer__circle {
  填充：無；
  中風(fēng)：沒有；
}

/ *顯示計(jì)時(shí)器進(jìn)度的SVG路徑 */
.base-timer__path-path {
  中風(fēng)寬度：7px;
  中風(fēng)：灰色；
}

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

步驟2：設(shè)置時(shí)間標(biāo)簽

您可能注意到，該模板包含一個(gè)空的，它將保留剩余的時(shí)間。我們將以適當(dāng)?shù)膬r(jià)值填充該地方。我們之前說過的時(shí)間將是MM：SS格式。為此，我們將創(chuàng)建一種稱為formattimeleft的方法：

函數(shù)formatattimeleft（time）{
  //最大的圓形整數(shù)小于或等于時(shí)間的結(jié)果除以60。
  const分鐘= Math.floor（Time / 60）;
  
  //秒是剩余時(shí)間除以60（模量運(yùn)算符）
  令秒=時(shí)間％60;
  
  //如果秒的值小于10，則顯示為零領(lǐng)先的秒
  如果（秒<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>
`

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

 .base-timer__label {
  位置：絕對(duì)；
  
  / *大小應(yīng)與父容器匹配 */
  寬度：300px;
  身高：300px;
  
  / *將標(biāo)簽對(duì)齊到頂部 */
  頂部：0;
  
  / *創(chuàng)建一個(gè)靈活的盒子，以垂直和水平的內(nèi)容為中心 */
  顯示：Flex;
  準(zhǔn)項(xiàng)目：中心；
  Jusify-content：中心；

  /*一種任意號(hào)碼；適應(yīng)您的喜好 */
  字體大?。?8px;
}

好的，我們準(zhǔn)備使用Timeleft值，但是該值還不存在。讓我們創(chuàng)建它并將初始值設(shè)置為我們的時(shí)間限制。

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

//最初，沒有時(shí)間已經(jīng)過去了，但這會(huì)計(jì)算
//從time_limit減去
讓時(shí)間超過= 0;
令timeleft = time_limit;

我們距離近一步。

就在現(xiàn)在，我們有一個(gè)計(jì)時(shí)器，該計(jì)時(shí)器從20秒開始……但是目前還沒有任何計(jì)數(shù)。讓我們將其栩栩如生，以降低到零秒。

步驟3：倒計(jì)時(shí)

讓我們考慮一下我們需要計(jì)算的時(shí)間。目前，我們有一個(gè)代表我們初始時(shí)間的時(shí)間表值，并且一個(gè)時(shí)間超過的值表示倒計(jì)時(shí)一旦啟動(dòng)了多少時(shí)間。

我們需要做的是增加每秒一個(gè)單位的時(shí)間超過一個(gè)單位的值，并根據(jù)新的時(shí)間超過的值重新計(jì)算Timeleft值。我們可以使用setInterval函數(shù)實(shí)現(xiàn)這一目標(biāo)。

讓我們實(shí)現(xiàn)一種稱為startTimer的方法，該方法將：

• 設(shè)置計(jì)數(shù)器間隔
• 每秒增加時(shí)間超過的值
• 重新計(jì)算Timeleft的新價(jià)值
• 在模板中更新標(biāo)簽值

我們還需要在需要時(shí)保留對(duì)該間隔對(duì)象的引用以清除它 - 這就是為什么我們將創(chuàng)建一個(gè)計(jì)時(shí)插圖變量的原因。

令timerInterval = null;

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

函數(shù)startTimer（）{
  timerInterval = setInterval（（）=> {
    
    //通過一個(gè)時(shí)間來增加的時(shí)間
    TimePassed = TimePassed = 1;
    timeleft = time_limit-時(shí)間超過；
    
    //剩余標(biāo)簽已更新
    document.getElementById（“ base-timer-Label”）。innerhtml = formattime（timeleft）;
  }，1000）;
}

我們有一種啟動(dòng)計(jì)時(shí)器的方法，但我們不會(huì)在任何地方稱呼它。讓我們立即開始加載計(jì)時(shí)器。

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

就是這樣！現(xiàn)在，我們的計(jì)時(shí)器將計(jì)算時(shí)間。雖然這太好了，而且如果我們可以在時(shí)間標(biāo)簽上添加一些顏色并在不同的時(shí)間值中更改顏色，那就更好了。

步驟4：用另一個(gè)戒指蓋住計(jì)時(shí)器戒指

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

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

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

接下來，讓我們?yōu)槭Ｓ鄷r(shí)間路徑創(chuàng)建一種初始顏色。

 const color_codes = {
  信息：{
    顏色：“綠色”
  }
};

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

最后，讓我們添加一些樣式，使圓形路徑看起來像我們原始的灰色戒指。這里重要的是要確保寬度與原始環(huán)的大小相同，并且過渡的持續(xù)時(shí)間設(shè)置為一秒鐘，以使其動(dòng)畫順利，并與時(shí)間標(biāo)簽中剩余的時(shí)間相對(duì)應(yīng)。

 .base-timer__path remaining {
  / *與原始環(huán)一樣厚 */
  中風(fēng)寬度：7px;

  / *圓形末端以創(chuàng)建一個(gè)無縫圓 */
  中風(fēng) - 萊內(nèi)卡普：圓形；

  / *確保動(dòng)畫從圓的頂部開始 */
  變換：旋轉(zhuǎn)（90度）;
  轉(zhuǎn)化原始：中心；

  / *一秒鐘與倒數(shù)計(jì)時(shí)器的速度對(duì)齊 */
  過渡：1S線性；

  / *允許顏色值更新時(shí)，戒指可以更改顏色 */
  中風(fēng)：CurrentColor；
}

.base-timer__svg {
  / *翻轉(zhuǎn)SVG并使動(dòng)畫從左到右移動(dòng) */
  變換：scalex（-1）;
}

這將輸出覆蓋計(jì)時(shí)器環(huán)的中風(fēng)，但它并沒有動(dòng)畫，而只是隨著時(shí)間的流逝而揭示了計(jì)時(shí)器環(huán)。

為了使剩余時(shí)間列的長度動(dòng)畫，我們將使用“沖程 - dasharray屬性”?？死锼梗–hris）解釋了它是如何用來創(chuàng)建元素“繪畫”本身的幻想的。在CSS-tricks年鑒中，有關(guān)其屬性和示例的詳細(xì)信息。

步驟5：動(dòng)畫進(jìn)度戒指

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

我們可以看到的是，卒中 - 劃線的值實(shí)際上將我們的剩余時(shí)間環(huán)切成相等的部分，其中長度是剩余的時(shí)間。當(dāng)我們將沖程 - 劃線的值設(shè)置為單位數(shù)字（即1-9）時(shí)，這就是發(fā)生這種情況。

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

這將第一部分（剩余時(shí)間）的長度設(shè)置為10，第二部分（通過時(shí)間）將其設(shè)置為30。我們可以在計(jì)時(shí)器中使用一個(gè)小技巧來使用它。最初，我們需要的是覆蓋圓的整個(gè)長度，這意味著剩余時(shí)間等于環(huán)的長度。

那長度是多少？拿出您的舊幾何教科書，因?yàn)槲覀兛梢杂脭?shù)學(xué)數(shù)來計(jì)算弧線的長度：

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

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

那可行！

好的，數(shù)組中的第一個(gè)值是我們剩余的時(shí)間，第二個(gè)值是已經(jīng)過去了多少時(shí)間。我們現(xiàn)在需要做的是操縱第一個(gè)價(jià)值。讓我們在下面查看更改第一個(gè)值時(shí)我們可以期望的。

我們將創(chuàng)建兩種方法，一種負(fù)責(zé)計(jì)算剩下的初始時(shí)間的分?jǐn)?shù)，另一種負(fù)責(zé)計(jì)算中風(fēng) - 劃線值并更新代表我們剩余時(shí)間的元素。

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

我們還需要每秒通過的路徑來更新我們的路徑。這意味著我們需要在計(jì)時(shí)界面內(nèi)調(diào)用新創(chuàng)建的setCircleDasharray方法。

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

現(xiàn)在我們可以看到事情在移動(dòng)！

哇，它有效……但是……仔細(xì)觀察，尤其是最后?？磥砦覀兊膭?dòng)畫落后了一秒鐘。當(dāng)我們到達(dá)0時(shí)，仍然可以看到一小塊戒指。

這是由于動(dòng)畫的持續(xù)時(shí)間設(shè)置為一秒鐘。當(dāng)將剩余時(shí)間的值設(shè)置為零時(shí)，將戒指實(shí)際上動(dòng)畫為零仍然需要一秒鐘。我們可以通過在倒計(jì)時(shí)逐漸減小環(huán)的長度來擺脫這一點(diǎn)。我們在計(jì)算時(shí)間差異方法中這樣做。

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

我們?nèi)ィ?/p>

糟糕……還有一件事。我們說，當(dāng)剩下的時(shí)間到達(dá)某些點(diǎn)時(shí)，我們想更改進(jìn)度指標(biāo)的顏色 - 就像讓用戶知道時(shí)間幾乎上升了。

步驟6：在某些時(shí)間點(diǎn)更改進(jìn)度顏色

首先，我們需要添加兩個(gè)閾值，這些閾值將指示何時(shí)應(yīng)該更改警告并提醒狀態(tài)，并為每個(gè)狀態(tài)添加顏色。我們從綠色開始，然后去奧蘭治（Orange）作為警告，然后在時(shí)間快到時(shí)紅色。

 //警告發(fā)生在10s
const Warning_threshold = 10;
//警報(bào)在5s中發(fā)生
const Alert_threshold = 5;

const color_codes = {
  信息：{
    顏色：“綠色”
  }，，
  警告： {
    顏色：“橙色”，
    閾值：Warning_threshold
  }，，
  警報(bào)： {
    顏色：“紅色”，
    閾值：alert_threshold
  }
};

現(xiàn)在，讓我們創(chuàng)建一種方法，該方法負(fù)責(zé)檢查閾值是否超過閾值并在發(fā)生這種情況時(shí)更改進(jìn)度顏色。

函數(shù)setRemainingPathColor（timeleft）{
  const {警報(bào)，警告，info} = color_codes;

  //如果剩余時(shí)間小于或等于5，請(qǐng)刪除“警告”類并應(yīng)用“警報(bào)”類。
  if（timeleft <p>因此，當(dāng)計(jì)時(shí)器達(dá)到點(diǎn)并在其位置添加另一個(gè)時(shí)，我們基本上正在刪除一個(gè)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創(chuàng)建動(dòng)畫倒計(jì)時(shí)計(jì)時(shí)器的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！