<progress> | HTML5 进度条标签的定义与用法

由 hcduguo

定义与用法

  • <progress>标签用于显示任务的进度，提供了一种在网站上创建进度栏的简便方法；
  • <progress>标签多用于网页上文件上传、下载的进度显示；
  • <progress> 标签经常与 JavaScript 搭配使用来动态显示进度；
  • <progress> 标签是 HTML5 中的新标签。

提示：<progress> 标签不适合用来显示度量数据（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，使用 <meter> 标签代替。

语法格式

<progress></progress>  

代码示例

下载进度显示:  
<progress value="43" max="100"></progress>
效果展示：
下载进度显示: 
<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()">下载</button>
效果展示：


浏览器支持

IE 10、Firefox、Opera、Chrome 和 Safari 6 支持 <progress> 标签。

注释：IE 9 或者更早版本的 IE 浏览器不支持 <progress> 标签。

标签属性

: HTML5新标签。

属性值描述
maxnumber规定需要完成的值。
valuenumber规定进程的当前值。

全局属性

<progress> 标签支持 HTML 的全局属性。

事件属性

<progress> 标签支持 HTML 的事件属性。

相关