html5新增标签progress

浏览数：47 / 时间：2015年06月09日

首先，请允许我在这里先表达一下对张鑫旭这位大牛的尊重之情，在学progress的时候，在他的网站上学到了很多我们会忽略的事情，也找到了自己的困惑的答案~~

参考网站：http://www.w3.org/TR/html5/forms.html#the-progress-element

一：progress简介

　　progress是HTML5中的新增标签，是进度条，注意与同样是HTML5新增标签的meter的区别，小女子看来meter值得是占比，而progress指的是进度；

　　不支持的浏览器：IE10以下；firefox；

　　可设置width:*;跟height:*;样式，所以我理解为display:inline-block;标签，但是IE10以下的浏览器宽高却不表现，firefox虽不支持，但是宽、高、边框、背景还是有显示的。

　　基本属性：value || max || position || labels

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

上边是定义，由此可知，position跟labels属性是只读的；

max值得是最大值，缺省的话，默认是1，进度范围是0.0~1.0；max="100"；则进度范围是0~100;
value值是已经完成的进度的值；缺省这个属性的话，表示不清楚当前进度，各个浏览器表现不同；IE10此时最好玩，是各种动态的点点；感兴趣的可以看看；只写value属性，而不写值的时候表现跟前者又不相同；这两种情况返回的value值是0；这些都是大家可以自己尝试的，自己试试~~
position属性只读，可以在js中获取，值是value/max;当进度条是不确定的时候，也就是value不定的时候，返回-1；
labels获得的是一个列表，for属性值是progress的id的所有label集合；（这个我真不知道有什么实际用途，有经验以后告知）；在支持progress的浏览器中IE跟girefox还不支持该属性，得到的是undefined;

progress常常跟js合作来完成进度的动态表示，下边是一个简单的demo；

    <section>
     <h2>Task Progress结合javascript的使用实现进度条的变化</h2>
     <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
     <label for="p">我不知道这些label实际有什么用处，得查查,w3上也没有详细说用途</label>
     <label for="p">我不知道这些label实际有什么用处，得查查,w3上也没有详细说用途</label>
     <script>
      var progressBar = document.getElementById(‘p‘);

      var value = 0;
      function updateProgress(newValue) {
        progressBar.value = newValue;
        progressBar.getElementsByTagName(‘span‘)[0].textContent = newValue;
        value++;
        setTimeout(function(){
            if(value>100){return;}
            updateProgress(value);
            // progress属性position的值是value/max，是只读的
            console.log("position",progressBar.position);
            // 最后一个属性也是只读的labels，是id是该progress的label的集合，支持progress的浏览器中IE10还不支持，
            // Firefox也不支持
            console.log("labels",progressBar.labels);
        },100);
      }

      updateProgress(value);
     </script>
    </section>

二：progress元素的样式控制

　　之所以会单独说这个，也是因为其各个浏览器的不同实现。这个时候，表格的确用途很大；

　　术语解释：“边框”指的是整个进度条的边框；“背景”指的是整个进度条的背景；“已完成背景”指的是已经完成的进度的背景；

　　background效果在刚开始的时候，我并没有在chrome跟opera浏览器中看到，但是后来在张鑫旭的网站中看到才知道其实是有效果的，只是被下边的-webkit-progress-bar的默认样式给覆盖了而已；当::-webkit-progress-bar{background:transparent;}的时候，progress{background:*;}就能够显示出来；另外，奇葩的竟然是，IE是通过color实现已经完成进度的背景的。

三：浏览器解决方案

　　因为IE6~IE9和Safari不支持我们就不适用该元素了吗？天啊，这也太不爽了吧，别急，有兼容方式的哦。

　　识别progress的浏览器是会忽略其内部的html代码的，所以我们可以这样写：<progress><div>这里写兼容IE的东东</div></progress>

　　下边是一个小demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progress兼容实例</title>
    <style>
        *{margin:0;padding:0;}
        progress{
            display:inline-block;
            width:200px;
            height:30px;
            border:1px solid #f0f;
            background-color:#eee;
            color:#f00;
        }
        progress::-webkit-progress-bar{background:#eee;}
        progress::-moz-progress-bar{background:#f00;}
        progress::-webkit-progress-value{background:#f00;}
        /*IE6~9*/
        progress ie{
            display:block;
            height:100%;
            background-color:#f00;
        }
    </style>
    <script>
        if (typeof window.screenX !== "number") {
            document.createElement("progress");    
            document.createElement("ie");    
        }
    </script>
</head>
<body>
    <progress max="100" id="p"><ie style="width:0;"></ie></progress>
    <input type="button" value="点击开始上传">
    <span id="show"></span>
    <script>
        var oProgress = document.getElementById("p");
        var oBtn = document.getElementsByTagName("input")[0];
        var oShow = document.getElementById("show");
        var oIe = oProgress.getElementsByTagName("ie")[0];
        var newValue = 1;

        function updateProgress(newValue){
            oProgress.value = newValue;
            oIe.style.width = newValue + "%";
            oShow.innerHTML = oIe.style.width;
            newValue++;
            if(newValue>100){
                oBtn.value="上传成功";
                return;
            };
            setTimeout(function(){
                updateProgress(newValue);
            },100);
        }

        oBtn.onclick = function(){
            setTimeout(function(){
                updateProgress(newValue);
            },1000);
        }
    </script>
</body>
</html>