html5 progress元素

短命女 2022-08-02 09:51 237阅读 0赞

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开始模拟进度！

http://hushc.sinaapp.com/post/43.html