html 中的 <progress> 标签用于展示任务完成进度，1. 支持确定型与不确定型两种使用方式；2. 动态效果需结合 javascript 更新 value 属性；3. 可通过 css 自定义样式；4. 常用于文件上传进度展示；5. 适用于后台任务进度轮询；6. 需注意浏览器兼容性及避免滥用。
<progress> 标签在 HTML 中代表一个任务的完成进度。它提供了一种语义化的方式来显示进度条，而无需依赖 JavaScript 或 CSS 来构建。我们可以用它来展示文件上传、下载或者任何需要可视化进度的操作。
<progress> 标签本身简单易用，但要实现动态效果，则需要结合 JavaScript 来更新其 value 属性。
如何使用 progress 标签
<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 标签可能会导致用户体验下降。如果需要显示页面加载进度，可以考虑使用其他技术，例如页面加载指示器或骨架屏。
