HTML5 <progress> 标签
主题：HTML5 标签参考上一页|下一页
说明
<progress> 元素表示任务的完成进度。
此元素通常用于指示已完成多少任务，例如在页面上加载某些内容或注册过程。 它通常显示为进度条，通常标记为从 0 到 100% 的百分比。
下表总结了此标签的使用上下文和版本历史。
| Placement: | Inline |
|---|---|
| Content: | Inline 和 text，但其后代中没有 <progress> |
| 开始/结束标签： | 开始标签： required, 结束标签：required |
| 版本： | New in HTML5 |
语法
<progress> 标签的基本语法如下：
HTML / XHTML: <progress> ... </progress>
下面的示例显示了 <progress> 标签的作用。
<h2>Task Progress</h2>
<p>Progress: <progress id="bar" value="0" max="100"><span>0</span>%</progress></p>
<script type="text/javascript">
var i = 0;
var progressBar = document.getElementById("bar");
function countNumbers(){
if(i < 100){
i = i + 1;
progressBar.value = i;
// 对于不支持进度标签的浏览器
progressBar.getElementsByTagName("span")[0].textContent = i;
}
// 在再次运行此脚本之前等待一段时间
setTimeout("countNumbers()", 500);
}
countNumbers();
</script>注意： <progress> 元素通常与 JavaScript 一起使用，以显示任务的进度。 此元素不应用于表示量规。 要表示仪表，请改用 <meter> 标签。
标签特定属性
下表显示了特定于 <progress> 标签的属性。
| 属性 | 值 | 说明 |
|---|---|---|
max |
number | 指定任务总共需要多少工作。 |
value |
number | 指定已完成多少任务。 它必须是介于 0 和 max 之间的有效浮点数，或者如果 max 属性不存在则介于 0 和 1 之间。 |
全局属性
与所有其他 HTML 标签一样， <progress> 标签支持 HTML5 中的全局属性。
事件属性
<progress> 标签还支持 HTML5 中的事件属性。
浏览器兼容性
所有主要的现代浏览器都支持 <progress> 标签。
 |
基本支持—
|
进一步阅读
请参阅以下教程： HTML 表单.
相关标签： <meter>.
Advertisements