html 中的
如何使用 progress 标签
立即学习“前端免费学习笔记（深入）”；
-
确定型（Determinate）: 适用于已知任务总长度的情况。我们需要设置 max 属性来表示任务的总量，并使用 value 属性来表示当前已完成的量。
<progress value="50" max="100"></progress>
-
不确定型（Indeterminate）: 适用于无法确定任务总长度的情况。在这种情况下，我们不设置 value 属性。浏览器会显示一个循环动画，表示任务正在进行中。
<progress></progress>
如何通过 JavaScript 实现动态效果
要实现动态效果，我们需要使用 JavaScript 定期更新 progress 标签的 value 属性。以下是一个简单的例子：
<!DOCTYPE html> <html> <head> <title>Progress 标签动态效果</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>
在这个例子中，我们首先获取 progress 元素。然后，我们使用 setInterval 函数定期更新 value 属性。当 value 达到 max 值时，我们清除 interval 并显示一个提示。
progress 标签的样式定制
progress 标签的默认样式在不同浏览器中可能有所不同。我们可以使用 CSS 来定制它的外观。
progress { width: 200px; height: 20px; background-color: #eee; border: 1px solid #ccc; border-radius: 5px; appearance: none; /* 移除默认样式 */ } 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; }
这里，我们移除了默认样式，并设置了背景颜色、边框和圆角。我们还使用了伪元素来定制进度条的颜色。
如何处理文件上传进度
文件上传是 progress 标签的一个常见应用场景。我们可以使用 XMLHttpRequest 对象来监听上传进度，并更新 progress 标签的 value 属性。
<!DOCTYPE html> <html> <head> <title>文件上传进度</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>
在这个例子中，我们监听文件输入框的 change 事件。当用户选择文件后，我们创建一个 XMLHttpRequest 对象，并使用 FormData 对象来封装文件数据。然后，我们监听 xhr.upload.progress 事件，并根据 event.loaded 和 event.total 属性计算上传进度。
如何处理后台任务进度
有时候，我们需要显示后台任务的进度。在这种情况下，我们需要从服务器获取进度信息，并更新 progress 标签的 value 属性。
<!DOCTYPE html> <html> <head> <title>后台任务进度</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"); // 替换为你的进度查询接口 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("任务完成！"); } } }; xhr.send(); } getTaskProgress(); </script> </body> </html>
在这个例子中，我们使用 XMLHttpRequest 对象定期从服务器获取进度信息。我们使用 setTimeout 函数来设置查询间隔。当进度达到 100% 时，我们显示一个提示。
progress 标签的兼容性问题
progress 标签在现代浏览器中得到了很好的支持。但是，在一些旧版本的浏览器中，可能需要使用 JavaScript 和 CSS 来模拟进度条的效果。可以考虑使用一些成熟的 JavaScript 库，例如 jquery ui 或 bootstrap，它们提供了跨浏览器的进度条组件。
如何避免 progress 标签的滥用
progress 标签应该只用于显示任务的完成进度。不应该用于其他目的，例如显示页面加载进度或动画效果。滥用 progress 标签可能会导致用户体验下降。如果需要显示页面加载进度，可以考虑使用其他技术，例如页面加载指示器或骨架屏。
