<progress> | HTML5 进度条标签的定义与用法
定义与用法
- <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 | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
IE 10、Firefox、Opera、Chrome 和 Safari 6 支持 <progress> 标签。
注释:IE 9 或者更早版本的 IE 浏览器不支持 <progress> 标签。
标签属性
: HTML5新标签。
属性 | 值 | 描述 |
---|---|---|
max | number | 规定需要完成的值。 |
value | number | 规定进程的当前值。 |
全局属性
<progress> 标签支持 HTML 的全局属性。
事件属性
<progress> 标签支持 HTML 的事件属性。