H5 progress标记

进度条标记
示例:<progress class="processbar" id="processbar" max="100" value="5"></progress><label id="processvalue"></label>

属性
max 进度条最大值
value 进度条当前值
position 只读属性,value/max 这个值算出来会有很多小数点,需要取整数

样式: 进度条样式,FF EDGE CHROME 都不一样,是个灾难
　　边框 border:{1px solid gold;} // 这个容易理解,和其它元素边框一样
　　背景色:background-color:{white;}// 通用设置
　　　　以下是不同浏览器设定

　　　　color: gold; // 背景色(已经完成的进度) IE的高版本

　　　　progress::-moz-progress-bar { background: gold; }// 背景色(已经完成的进度)  火狐

　　　　progress::-webkit-progress-bar { background: white; }// 背景色(整个进度条的背景) 谷歌

　　　　progress::-webkit-progress-value  { background: gold; }// 背景色(已经完成的进度) 谷歌

　一个简单的示例
1.样式
.processbar {

　　height: 30px;　　　　　　　 // 进度条高度

　　width: 30%;　　　　　　　　// 进度条宽度

　　border: 4px solid gold; // 进度条边框

　　background-color: red;　　 // 整个进度条背景色

　　color: black;　　　　　　　　// 已经完成的进度 IE高版本(10,11)

}
progress::-webkit-progress-bar {

　　background-color: red; // 整个进度条的背景 谷歌

}
progress::-webkit-progress-value {

　　background-color: black; // 已经完成的进度 谷歌

}
progress::-moz-progress-bar {

　　background-color: black; // 已经完成的进度 火狐

}
2.标记
// 进度条
<progress class="processbar" id="processbar" max="100" value="5"></progress><label id="processvalue"></label>
// 重置

<input type="button" name="" value="重来一次" onclick="resetprocess();" />
3.脚本
<script>　
stepprocessbar();

// 进度条增长

function stepprocessbar() {

　　var pb = document.getElementById("processbar");

　　pb.value = pb.value + 1;
　　// 进度显示label

　　var processlabel = document.getElementById("processvalue");

　　processlabel.innerText= pb.value + '%';

　　processlabel.textContent = pb.value + '%';;// FF 不支持innerText
　　if (pb.value < 100) {

　　　　setTimeout(function () {

　　　　　　stepprocessbar();

　　　　}, 50)

　　}

}

// 重置进度条

function resetprocess() {

　　var pb = document.getElementById("processbar");

　　if (pb.value != 100) return;

　　document.getElementById("processbar").value = 0;

　　stepprocessbar();

}
</script>