HTML进度标签 - 珊瑚贝

本文概述

HTML进度标签的属性
HTML进度标签示例
样式进度栏
带有JavaScript的HTML进度标签
支持的浏览器

HTML <progress>标记用于显示任务的进度。它为Web开发人员提供了一种在网站上创建进度栏的简便方法。它主要用于显示网页上文件上传的进度。

HTML进度标记是HTML5中的新增功能, 因此你必须使用新的浏览器。

HTML进度标签的属性

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

标签	描述
value	它定义了任务已完成多少工作。
max	它定义了任务总共需要多少工作。

进度标签应仅用于表示任务的进度, 而不仅仅是指标（磁盘速度使用情况）。为此, 使用<meter>元素。

HTML进度标签示例

让我们看一下没有属性的HTML进度示例。

<progress></progress>

立即测试

输出：

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

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

立即测试

输出：

下载进度：

样式进度栏

你可以在进度标签上应用CSS代码。

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

立即测试

输出：

带有JavaScript的HTML进度标签

<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>

立即测试

输出：

点击我