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代码:
<progress value="0" max="100" id="DownloadProgress"></progress>
<span><span id="ProgressTip">0</span>%</span>
<input type="button" value="start" id="Start" />
js代码:
var progressCtrl = {
init: function() {
var me = this;
me.initValue = 0;
me.progress = document.getElementById('DownloadProgress');
me.tip = document.getElementById('ProgressTip');
document.getElementById('Start').onclick = me.startDownload;
},
startDownload: function() {
var me = progressCtrl;
me.timer = setInterval(me.onInterval, 100);
},
onInterval: function() {
var me = progressCtrl;
var initValue = 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) {
var me = progressCtrl;
return me.progress.value = value;
}
};
progressCtrl.init();