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>