<progress> - 进度条

首页 > HTML标签 > <progress>

■ 摘要

项目说明
形式<progress>~</progress>
支持H5+ / Fx6+ / Op11+ / Ch6+
标签省略开始标签:必须,结束标签:必须
可包含元素块元素 / 内联元素

■ 说明

progress 用来显示以 max 为最大值,value 为当前值的进度条。

<progress>~</progress> 之间可以写想让不支持 <progress> 的浏览器显示的内容。

■ 属性

【特性】
属性意义
form=idN4+。指定想关联的 form 元素的 id。
max=nH5+。指定最大值。
value=nN5+。指定当前值。

【一般属性】
属性意义
class=classH4+/e3+/N4+。指定类。
id=idH4+/e3+/N4+。指定ID。
style=styleH4+/e3+/N4+。指定样式。
title=titleH4+/e4+/N6+。指定标题。
dir=dirH4+/e5+/N6+。指定文字显示的方向。
lang=langH4+/e4+/N6+。指定语言种类。
accesskey=keyH5+。指定快捷键。
tabindex=nH5+。指定TAB键在控件中的移动顺序。
contenteditable=boolH5+/e55+。使元素可编辑。
contextmenu=idH5+。指定contextmenu。
draggable=boolH5+。可拖动。
dropzone=valueH5+。可拖放。
hiddenH5+。隐藏元素。
spellcheck=boolH5+。检查拼写。
IE扩展属性可以指定IE扩展属性。

■ 举例

HTML代码
<script type="text/javascript">
<!--
window.onload = incValue;
function incValue() {
    var o = document.getElementById('prog1');
    if (o.value == 100) {
        o.value = 0;
    } else {
        o.value += 10;
    }
    window.setTimeout("incValue()", 1000);
}
// -->
</script>
<progress id="prog1" max=100 value=0></progress>

浏览器显示效果