推荐答案
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meter & Progress Example</title>
<style>
.progress-container {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>Meter 标签示例</h2>
<div class="progress-container">
<label for="disk-usage">磁盘使用率:</label>
<meter id="disk-usage" value="70" min="0" max="100" low="30" high="90" optimum="60"></meter> 70%
</div>
<div class="progress-container">
<label for="battery">电量:</label>
<meter id="battery" value="0.65" min="0" max="1" low="0.3" high="0.8"></meter> 65%
</div>
<h2>Progress 标签示例</h2>
<div class="progress-container">
<label for="download">下载进度:</label>
<progress id="download" value="60" max="100"></progress> 60%
</div>
<div class="progress-container">
<label for="upload">上传进度:</label>
<progress id="upload" value="0.3" max="1"></progress> 30%
</div>
<script>
// 模拟动态更新 progress
const progressElement = document.getElementById('download');
let progressValue = 0;
setInterval(() => {
if (progressValue < 100) {
progressValue += 10;
progressElement.value = progressValue;
progressElement.nextElementSibling.textContent = `${progressValue}%`;
}
}, 500);
</script>
</body>
</html>本题详细解读
Meter 标签
meter 标签用于显示度量值，例如磁盘空间使用情况，或者某个请求的关联性。它不是简单的进度条，更侧重于展示一个在已知范围内的数值。
关键属性：
value: 当前的数值。min: 范围的最小值，默认为0。max: 范围的最大值，默认为1。low: 低值，如果value小于该值，则表示为低。high: 高值，如果value大于该值，则表示为高。optimum: 最优值。
使用场景:
- 展示磁盘空间使用率。
- 展示电量。
- 表示某个指标的健康程度。
示例说明:
在上述示例中，disk-usage 的 meter 标签表示一个磁盘使用情况的度量，value 是70， min是0，max 是100，low和high定义了低和高值，optimum定义了最优值，表示当前状态在合理范围内。battery的meter标签表示了电量，值的范围是0到1。
Progress 标签
progress 标签用于显示一个任务的进度，比如文件下载或者上传进度。
关键属性：
value: 当前的进度值。max: 完成进度所需的值。
使用场景:
- 文件上传、下载进度。
- 步骤流程进度。
- 加载进度。
示例说明:
在上述示例中，download 的 progress 标签表示一个下载进度，value是60，max是100。upload的 progress标签表示了上传进度， value是0.3，max是1。注意，如果 max的值不为 1，那么value的值必须小于max。
JavaScript 动态更新
progress 标签通常会配合 JavaScript 来动态更新 value 属性，从而展示动态的进度变化。上面的例子中，script 标签内的代码模拟了 download 进度条的动态更新，每隔 500 毫秒将 value 增加 10，直到 100 为止。注意，需要同时更新 progress 标签旁边显示的百分比。
区别总结
meter是显示一个已知范围内的度量值，有最优值、高低范围的概念，更侧重于展示当前数值在整体范围内的含义。progress是显示一个任务的进度，只有当前值和最大值两个关键属性，更侧重于展示任务的完成程度。