用于显示任务的进度。它为网页开发人员提供了一种在网站上创建进度条的简单方法。它通常用于显示文件上传的进度。

HTML <progress> 标签是HTML5中的新标签,因此必须使用新的浏览器。

HTML <progress> 标签的属性

HTML <progress> 标签支持全局属性和事件属性,以及两个特定属性。

属性描述
value定义任务已完成的工作量。
max定义任务总共需要的工作量。

<progress> 标签应仅用于表示任务的进度,而不仅仅是一个仪表(例如磁盘空间使用情况)。对于这种情况,使用 <meter> 元素。


HTML <progress> 标签示例

让我们先看一个没有属性的 HTML <progress> 示例。

<progress></progress>

现在我们来看一下带有 value 和 max 属性的进度示例。

Downloading progress:
<progress value="43" max="100"></progress>

样式化进度条

您可以在 <progress> 标签上应用 CSS 样式。

progress {
  width: 300px;
  height: 30px;
}

使用 JavaScript 的 HTML <progress> 标签

<progress> 标签应与 JavaScript 结合使用以显示任务的进度。

<script>
var gvalue = 1;
function abc() {
  var progressExample = document.getElementById('progress-javascript-example');
  setInterval(function() {
    if (gvalue < 100) {
      gvalue++;
      progressExample.value = gvalue;
    }
    abc();
  }, 1000);
}
</script>
<progress id="progress-javascript-example" min="1" max="100"></progress>
<br/><br/>
<button onclick="abc()">click me</button>

支持的浏览器

元素chrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<progress>

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML面试题, HTML笔试题, HTML编程思想