首先，请允许我在这里先表达一下对张鑫旭这位大牛的尊重之情，在学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>
你可以在各个浏览器下做测试~~
现在真心觉得写一篇博客不容易，所以，转载请注明出处~~