progress元素是HTML5中新增的状态交互元素，用来表示页面中某个任务完成的进度，IDL定义如下：

interface HTMLProgressElement : HTMLElement {attribute double value;attribute double max;readonly attribute double position;readonly attribute HTMLFormElement form;readonly attribute NodeList labels;
};


progress元素可以是不确定的任务进度（仅仅表示某个任务正在进行中，而不知道该任务什么时候终止）;

不确定的进度：

progress元素也可以是一个介于某个最小值与最大值之间的进度，这是我们可以通过js来更新进度。

从前文HTMLProgressElement的接口定义可知，progress元素具有可读写value、max两个属性：

  • value属性表示一个任务已完成的进度值，可通过DOM元素progress.value进行操作；
  • max属性表示一个任务所需的总进度值，同样可通过DOM元素progress.max进行操作；
那么对于任何一个确定性的任务，只要能拿到已完成进度值以及总进度值，即可利用progress来实现动态展示进度。
下面这个例子模拟了一个动态进度的过程。

HTML代码：

<progressvalue="0"max="100"id="DownloadProgress"></progress>
<span><spanid="ProgressTip">0</span>%</span>
<inputtype="button"value="start"id="Start"/>


js代码： 

varprogressCtrl = {init:function() {varme = this;me.initValue = 0;me.progress = document.getElementById('DownloadProgress');me.tip = document.getElementById('ProgressTip');document.getElementById('Start').onclick = me.startDownload;},startDownload:function() {varme = progressCtrl;me.timer = setInterval(me.onInterval, 100);},onInterval:function() {varme = progressCtrl;varinitValue = me.initValue++;me.update(initValue);if(initValue >= me.progress.max) {//完成进度clearInterval(me.timer);me.tip.textContent = 100;//delete me.progress;//delete me.tip;}else{me.tip.textContent = me.initValue;}},update:function(value) {varme = progressCtrl;returnme.progress.value = value;}
};progressCtrl.init();


Example: setInterval模拟下载进度状态和百分比：

点击start开始模拟进度！

0%