首页 > 代码库 > html5新增标签progress
html5新增标签progress
首先，请允许我在这里先表达一下对张鑫旭这位大牛的尊重之情，在学progress的时候，在他的网站上学到了很多我们会忽略的事情，也找到了自己的困惑的答案~~
推荐给大家：http://www.zhangxinxu.com/wordpress/2013/02/html5-progress-element-style-control/comment-page-1/#comment-169478
参考网站：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>
你可以在各个浏览器下做测试~~
现在真心觉得写一篇博客不容易，所以，转载请注明出处~~
html5新增标签progress