0Pricing
HTML Academy · 课时

progress 和 meter 元素

使用原生 HTML 显示完成度和测量值

progress 和 meter 元素 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

进度元素

<progress> 元素表示任务的完成情况：

<label for="upload">File upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- max: total amount of work (default: 1) -->
<!-- value: amount of work done -->
<!-- Content between tags: fallback for old browsers -->

不确定进度

没有 value 时，进度条会显示不确定的动画：

<!-- Indeterminate: value not set -->
<progress id="loading">Loading...</progress>
<!-- Browser shows a cycling animation (no value known) -->

<!-- Set value when progress is known: -->
<script>
document.getElementById('loading').value = 45;
// Now shows 45% complete (with max=1: 0.45 = 45%)
</script>

使用 JavaScript 为进度添加动画

动态更新进度：

<progress id="task" max="100" value="0"></progress>
<span id="pct">0%</span>

<script>
let progress = 0;
const bar = document.getElementById('task');
const pct = document.getElementById('pct');

const interval = setInterval(() => {
  progress += 10;
  bar.value = progress;
  pct.textContent = progress + '%';
  if (progress >= 100) clearInterval(interval);
}, 500);
</script>

计量器元素

<meter> 元素显示已知范围内的标量测量值：

<meter min="0" max="100" value="72">72 out of 100</meter>
<!-- Unlike progress (task completion), meter shows a static measurement:
  - Disk usage
  - Password strength
  - Score or rating
  - Fuel level
-->

计量器属性

计量器有多个属性，可用于定义最佳范围和警告范围：

<meter
  min="0"      <!-- minimum possible value -->
  max="100"   <!-- maximum possible value -->
  low="30"    <!-- threshold: below this = low -->
  high="70"   <!-- threshold: above this = high -->
  optimum="50" <!-- where the optimal value lies -->
  value="85"
>85/100</meter>

计量器颜色状态

浏览器会根据低值、高值和最佳值为计量器自动着色：

<!-- optimum is in the low range: low values are good (e.g., error count) -->
<meter min="0" max="100" low="30" high="70" optimum="0" value="10">
  10 errors  <!-- green: value is in the good zone -->
</meter>

<!-- optimum is in the high range: high values are good (e.g., score) -->
<meter min="0" max="100" low="40" high="80" optimum="100" value="55">
  55 points  <!-- yellow: between low and high -->
</meter>

使用计量器显示磁盘使用情况

计量器的经典使用场景：磁盘或内存使用情况：

<label for="disk">Disk usage:</label>
<meter
  id="disk"
  min="0"
  max="500"
  low="400"
  high="450"
  optimum="0"
  value="420"
>420 GB of 500 GB used</meter>
<p>420 GB of 500 GB used (84%)</p>

使用计量器显示密码强度

使用计量器显示密码强度：

<label for="pwd">Password</label>
<input type="password" id="pwd">
<label for="strength">Strength:</label>
<meter id="strength" min="0" max="4" low="1" high="3" optimum="4" value="0"></meter>

<script>
document.getElementById('pwd').addEventListener('input', function() {
  const strength = calculateStrength(this.value); // 0-4
  document.getElementById('strength').value = strength;
});
</script>

设置进度和计量器的样式

自定义进度条和计量器的样式：

/* Basic progress styling */
progress {
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  border: none;
}

progress::-webkit-progress-bar { background: #e2e8f0; }
progress::-webkit-progress-value { background: #0070f3; }
progress::-moz-progress-bar { background: #0070f3; }

进度的无障碍性

添加 ARIA 属性，以便屏幕阅读器提供更好的支持：

<label for="upload">Upload progress</label>
<progress
  id="upload"
  max="100"
  value="65"
  aria-valuenow="65"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="File upload: 65% complete"
>65%</progress>

进度与计量器对比总结

主要区别：

  • <progress> — 随时间变化的任务完成情况；值向 max 递增；可以是不确定的
  • <meter> — 静态标量测量值；值已知；具有低值、高值和最佳值区域

分别适用于哪些场景

使用场景指南：

  • 进度 — 文件上传、表单完成向导、加载条
  • 计量器 — 磁盘使用情况、燃油表、信用评分、电池电量、搜索结果相关性

快速检查

要显示硬盘的已用空间比例，应使用哪个元素？

回顾：进度和计量器

进度和计量器要点：

  • <progress max value> — 任务完成情况；没有 value 时表示不确定进度
  • <meter min max low high optimum value> — 静态测量值
  • 浏览器会根据最佳值的位置自动为计量器着色
  • 添加 aria-valuenow/min/max，以便屏幕阅读器提供支持

常见问题解答

「progress 和 meter 元素」课时是免费的吗？

是的 — 「progress 和 meter 元素」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「progress 和 meter 元素」这节课中我会学到什么？

使用原生 HTML 显示完成度和测量值 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「progress 和 meter 元素」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. aside：补充内容
  2. 重新认识 figure 和 figcaption
  3. details 和 summary：披露组件
  4. progress 和 meter 元素
← 返回 HTML Academy