PRogress标签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元素们.演示1.
<progress value="50" max="100">50%进度</progress>
2.
<progress>不确定进度</progress>
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元素的样式控制、兼容与实例