HTML 5 | 标签

简介

<progress>标签是HTML 5中的一个进度条元素，用于表示任务的完成状态。它可以在网页上显示一个进度条并显示任务的完成百分比。

用法

使用<progress>标签非常简单，只需要在HTML文档中插入以下代码即可：

<progress value="50" max="100"></progress>

• value属性指定当前完成的进度，取值为0到max属性之间的一个数字。
• max属性指定了进度条的最大值，通常为100。

样式和行为定制

<progress>标签可以通过CSS样式进一步自定义，例如设置颜色、高度和宽度等。也可以通过JavaScript动态地修改value属性来实时更新进度条。

以下是一个更高级的示例：

<progress id="myProgress" value="0" max="100"></progress>

<script>
  let progress = document.querySelector("#myProgress");
  let percent = 0;

  function updateProgress() {
    if (percent < 100) {
      percent++;
      progress.value = percent;
      setTimeout(updateProgress, 100);
    }
  }

  updateProgress();
</script>

<style>
  #myProgress {
    width: 200px;
    height: 20px;
    border: 1px solid #ccc;
  }

  #myProgress::-webkit-progress-value { /* WebKit browsers */
    background-color: green;
  }

  #myProgress::-moz-progress-bar { /* Mozilla Firefox */
    background-color: green;
  }
</style>

上述示例通过JavaScript和CSS自定义了进度条的样式和行为。通过定时器不断更新value属性，进度值每100毫秒加1，直到完成为止。

兼容性

<progress>标签在现代浏览器中得到了良好的支持，但在低版本的浏览器中可能不被支持。为了确保兼容性，可以使用JavaScript和CSS来模拟进度条效果。

详细的兼容性信息可以在 Can I use 网站上找到。

总结

<progress>标签是HTML 5中一个有用的元素，可用于显示任务的完成进度。它可以通过属性和样式进行定制，也可以使用JavaScript动态更新进度。