HTML 的<progress> 元素可用於顯示任務(wù)進(jìn)度，1. 基本用法通過(guò)value 和max 屬性定義進(jìn)度範(fàn)圍，2. 不確定進(jìn)度時(shí)可省略value 進(jìn)入不確定模式，3. 可通過(guò)JavaScript 動(dòng)態(tài)更新value 實(shí)現(xiàn)進(jìn)度變化，4. 樣式可通過(guò)CSS 調(diào)整但需注意瀏覽器兼容性，5. 在舊瀏覽器中應(yīng)做好降級(jí)處理以確保兼容性。

任務(wù)進(jìn)度顯示其實(shí)是個(gè)挺常見(jiàn)的需求，比如上傳文件、加載數(shù)據(jù)，或者完成某個(gè)步驟時(shí)。 HTML 提供了一個(gè)原生的解決方案： <progress></progress>元素。它不僅語(yǔ)義清晰，而且使用起來(lái)也很簡(jiǎn)單。

基本用法和結(jié)構(gòu)

<progress></progress>標(biāo)籤的基本作用是展示一個(gè)任務(wù)的完成進(jìn)度。最簡(jiǎn)單的寫(xiě)法只需要一個(gè)value屬性和一個(gè)max屬性：

 <progress value="50" max="100"></progress>

這會(huì)顯示一個(gè)進(jìn)度條，當(dāng)前完成了50%，最大值是100%。如果你不設(shè)置max ，默認(rèn)值就是1，所以value應(yīng)該在0 到1 之間：

 <progress value="0.75"></progress>

這樣也能正常工作，但為了直觀起見(jiàn)，大多數(shù)人還是習(xí)慣用整數(shù)來(lái)表示百分比。

不確定進(jìn)度時(shí)怎麼處理？

有時(shí)候你並不知道任務(wù)什麼時(shí)候能完成，比如正在等待服務(wù)器響應(yīng)或者執(zhí)行一個(gè)長(zhǎng)時(shí)間運(yùn)行的操作。這時(shí)候可以用“不確定模式”（indeterminate）：

 <progress></progress>

只要不加value屬性，瀏覽器就會(huì)顯示一個(gè)動(dòng)態(tài)的進(jìn)度指示，通常是來(lái)回移動(dòng)的動(dòng)畫(huà)，告訴用戶“正在進(jìn)行中”，但不知道具體完成多少。

這種狀態(tài)很適合用在頁(yè)面加載初期、數(shù)據(jù)獲取階段，或者異步請(qǐng)求過(guò)程中，避免誤導(dǎo)用戶以為卡住了。

結(jié)合JavaScript 動(dòng)態(tài)更新進(jìn)度

實(shí)際項(xiàng)目裡，進(jìn)度往往是動(dòng)態(tài)變化的。你可以通過(guò)JavaScript 來(lái)更新<progress>的value屬性。比如在文件上傳時(shí)監(jiān)聽(tīng)進(jìn)度事件：

 <progress id="upload-progress" value="0" max="100"></progress>

<script>
  const progress = document.getElementById(&#39;upload-progress&#39;);

  // 模擬上傳進(jìn)度let current = 0;
  const interval = setInterval(() => {
    current = 10;
    progress.value = current;

    if (current >= 100) {
      clearInterval(interval);
    }
  }, 500);
</script>

這段代碼模擬了上傳過(guò)程，每半秒增加10% 的進(jìn)度，直到完成。實(shí)際開(kāi)發(fā)中，你可能會(huì)從XMLHttpRequest或fetch的onprogress事件中獲取真實(shí)進(jìn)度數(shù)據(jù)。

需要注意幾點(diǎn)：

• 確保value不超過(guò)max
• 如果用max="1" ，記得把進(jìn)度轉(zhuǎn)換成小數(shù)格式
• 在任務(wù)開(kāi)始前重置進(jìn)度條，避免上次的狀態(tài)殘留

樣式調(diào)整與兼容性考慮

雖然<progress>是原生元素，但不同瀏覽器的默認(rèn)樣式差異還挺大的。如果你想統(tǒng)一外觀，可以通過(guò)CSS 來(lái)美化它。

基本樣式可以這樣寫(xiě)：

 progress {
  width: 100%;
  height: 20px;
  border-radius: 10px;
}

不過(guò)要注意的是，有些瀏覽器（如Chrome）需要特殊選擇器來(lái)修改內(nèi)部樣式，比如：

 /* 修改進(jìn)度條內(nèi)部顏色*/
progress::-webkit-progress-value {
  background-color: #4caf50;
}

/* 修改背景部分*/
progress::-webkit-progress-bar {
  background-color: #f1f1f1;
}

這些偽類是非標(biāo)準(zhǔn)的，但在大多數(shù)現(xiàn)代瀏覽器中都支持。如果你追求更一致的外觀，也可以考慮用div 百分比寬度的方式手動(dòng)實(shí)現(xiàn)進(jìn)度條。

另外，在一些舊版瀏覽器中可能對(duì)<progress></progress>支持不夠好，建議做一下降級(jí)處理，比如顯示文本提示或隱藏元素。

基本上就這些。 <progress></progress>元素不算複雜，但在用戶體驗(yàn)上能起到不錯(cuò)的作用，尤其適合需要明確反饋進(jìn)度的場(chǎng)景。合理使用，可以讓用戶更安心地等待操作完成。

以上是html'進(jìn)度”元素用於任務(wù)進(jìn)度的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！