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

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

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

<progress></progress> 標(biāo)簽的基本作用是展示一個(gè)任務(wù)的完成進(jìn)度。最簡單的寫法只需要一個(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>

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

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

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

<progress></progress>

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

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

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

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

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

<script>
  const progress = document.getElementById('upload-progress');

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

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

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

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

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

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

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

基本樣式可以這樣寫：

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

不過要注意的是，有些瀏覽器（如 Chrome）需要特殊選擇器來修改內(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)度條。

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

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

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