.jpg)
html 中的
如何使用 progress 標(biāo)簽
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
-
確定型（Determinate）: 適用于已知任務(wù)總長(zhǎng)度的情況。我們需要設(shè)置 max 屬性來表示任務(wù)的總量，并使用 value 屬性來表示當(dāng)前已完成的量。
<progress value="50" max="100"></progress>
-
不確定型（Indeterminate）: 適用于無法確定任務(wù)總長(zhǎng)度的情況。在這種情況下，我們不設(shè)置 value 屬性。瀏覽器會(huì)顯示一個(gè)循環(huán)動(dòng)畫，表示任務(wù)正在進(jìn)行中。
<progress></progress>
如何通過 JavaScript 實(shí)現(xiàn)動(dòng)態(tài)效果
要實(shí)現(xiàn)動(dòng)態(tài)效果，我們需要使用 JavaScript 定期更新 progress 標(biāo)簽的 value 屬性。以下是一個(gè)簡(jiǎn)單的例子：
<!DOCTYPE html> <html> <head> <title>Progress 標(biāo)簽動(dòng)態(tài)效果</title> </head> <body> <progress id="myProgress" value="0" max="100"></progress> <button onclick="startProgress()">開始</button> <script> function startProgress() { let progress = document.getElementById("myProgress"); let value = 0; let interval = setInterval(function() { value += 10; progress.value = value; if (value >= 100) { clearInterval(interval); alert("完成！"); } }, 500); // 每 500 毫秒更新一次 } </script> </body> </html>
在這個(gè)例子中，我們首先獲取 progress 元素。然后，我們使用 setInterval 函數(shù)定期更新 value 屬性。當(dāng) value 達(dá)到 max 值時(shí)，我們清除 interval 并顯示一個(gè)提示。
progress 標(biāo)簽的樣式定制
progress 標(biāo)簽的默認(rèn)樣式在不同瀏覽器中可能有所不同。我們可以使用 CSS 來定制它的外觀。
progress { width: 200px; height: 20px; background-color: #eee; border: 1px solid #ccc; border-radius: 5px; appearance: none; /* 移除默認(rèn)樣式 */ } progress::-webkit-progress-bar { background-color: #eee; border-radius: 5px; } progress::-webkit-progress-value { background-color: #4CAF50; border-radius: 5px; } progress::-moz-progress-bar { background-color: #4CAF50; border-radius: 5px; }
這里，我們移除了默認(rèn)樣式，并設(shè)置了背景顏色、邊框和圓角。我們還使用了偽元素來定制進(jìn)度條的顏色。
如何處理文件上傳進(jìn)度
文件上傳是 progress 標(biāo)簽的一個(gè)常見應(yīng)用場(chǎng)景。我們可以使用 XMLHttpRequest 對(duì)象來監(jiān)聽上傳進(jìn)度，并更新 progress 標(biāo)簽的 value 屬性。
<!DOCTYPE html> <html> <head> <title>文件上傳進(jìn)度</title> </head> <body> <input type="file" id="myFile"> <progress id="uploadProgress" value="0" max="100"></progress> <script> let fileInput = document.getElementById("myFile"); let progress = document.getElementById("uploadProgress"); fileInput.addEventListener("change", function() { let file = fileInput.files[0]; let xhr = new XMLHttpRequest(); let formData = new FormData(); formData.append("file", file); xhr.upload.addEventListener("progress", function(event) { if (event.lengthComputable) { let percentComplete = (event.loaded / event.total) * 100; progress.value = percentComplete; } }); xhr.open("POST", "/upload"); // 替換為你的上傳接口 xhr.send(formData); }); </script> </body> </html>
在這個(gè)例子中，我們監(jiān)聽文件輸入框的 change 事件。當(dāng)用戶選擇文件后，我們創(chuàng)建一個(gè) XMLHttpRequest 對(duì)象，并使用 FormData 對(duì)象來封裝文件數(shù)據(jù)。然后，我們監(jiān)聽 xhr.upload.progress 事件，并根據(jù) event.loaded 和 event.total 屬性計(jì)算上傳進(jìn)度。
如何處理后臺(tái)任務(wù)進(jìn)度
有時(shí)候，我們需要顯示后臺(tái)任務(wù)的進(jìn)度。在這種情況下，我們需要從服務(wù)器獲取進(jìn)度信息，并更新 progress 標(biāo)簽的 value 屬性。
<!DOCTYPE html> <html> <head> <title>后臺(tái)任務(wù)進(jìn)度</title> </head> <body> <progress id="taskProgress" value="0" max="100"></progress> <script> let progress = document.getElementById("taskProgress"); function getTaskProgress() { let xhr = new XMLHttpRequest(); xhr.open("GET", "/task-progress"); // 替換為你的進(jìn)度查詢接口 xhr.onload = function() { if (xhr.status === 200) { let data = JSON.parse(xhr.responseText); progress.value = data.progress; if (data.progress < 100) { setTimeout(getTaskProgress, 1000); // 每 1 秒查詢一次 } else { alert("任務(wù)完成！"); } } }; xhr.send(); } getTaskProgress(); </script> </body> </html>
在這個(gè)例子中，我們使用 XMLHttpRequest 對(duì)象定期從服務(wù)器獲取進(jìn)度信息。我們使用 setTimeout 函數(shù)來設(shè)置查詢間隔。當(dāng)進(jìn)度達(dá)到 100% 時(shí)，我們顯示一個(gè)提示。
progress 標(biāo)簽的兼容性問題
progress 標(biāo)簽在現(xiàn)代瀏覽器中得到了很好的支持。但是，在一些舊版本的瀏覽器中，可能需要使用 JavaScript 和 CSS 來模擬進(jìn)度條的效果。可以考慮使用一些成熟的 JavaScript 庫(kù)，例如 jquery ui 或 bootstrap，它們提供了跨瀏覽器的進(jìn)度條組件。
如何避免 progress 標(biāo)簽的濫用
progress 標(biāo)簽應(yīng)該只用于顯示任務(wù)的完成進(jìn)度。不應(yīng)該用于其他目的，例如顯示頁(yè)面加載進(jìn)度或動(dòng)畫效果。濫用 progress 標(biāo)簽可能會(huì)導(dǎo)致用戶體驗(yàn)下降。如果需要顯示頁(yè)面加載進(jìn)度，可以考慮使用其他技術(shù)，例如頁(yè)面加載指示器或骨架屏。
.png)
