html5 progress

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代码：

0%

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();