progressprogress 标签定义运行中的任务进度（进程）。
属性属性值描述
max number 规定要完成的最大值
value number 规定进程的当前值
position float 返回进度条的当前位置
labels - 返回进度条的标记列表(如有)
max缺省情况下进度值范围从0.0~1.0,如果设置成max=100,则进度取值范围从0~100.
value规定当前值,若max=100,value=50则进度刚好一半.value属性的存在与否决定了progress进度条是否具有确定性.当没有value时,浏览器进度条会无限循环,但是,一旦有了value属性(即使没有值),也被认为是确定的.
position是只读属性,该属性反映了当前进度的位置,就是value/max的值.
labels也是只读属性,得到的是指向该progress元素的label元素们.
演示3.创建progress
<!doctype html>
<html>
<head>
<title>progress</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
function myfunction()
{
var x=document.createelement("progress");
x.setattribute("value","80");
x.setattribute("max","100");
document.body.appendchild(x);
}
</script>
<body>
创建progress:
<button onclick="myfunction()" id="myprogress">创建</button>
</body>
</html>
4.使用position属性
<!doctype html>
<html>
<head>
<title>progress</title>
<meta charset="utf-8">
</head>
<body>
<script>
function myfunction()
{
var x = document.getelementbyid("myprogress").position;
document.getelementbyid("demo").innerhtml = x;
}
</script>
<body>
<p>下载进度条:</p>
<progress id="myprogress" value="50" max="100"></progress>
<p id="demo"></p>
<button onclick="myfunction()">获取进度值</button>
</body>
</html>
html5 progress元素的样式控制、兼容与实例
以上就是html progress标签的使用详解的详细内容。