分享一個原生JS實現的動態加載進度條特效，效果如下：
實現的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實現加載進度條</title>
<style>
#progressBox {
width: 300px;
height: 40px;
border: 1px solid #C8C8C8;
background: white;
position: relative;
margin: 0 auto;
margin-top: 100px;
}
#progressBar {
position: absolute;
left: 0;
top: 0;
z-index: 2;
height: 40px;
width: 100%;
line-height: 40px;
color: white;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: Georgia;
clip: rect(0px, 0, 40px, 0px);
background: #00A1F5;
}
#progressText {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 40px;
line-height: 40px;
color: black;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: Georgia;
}
</style>
<script>
window.onload = function () {
//設定當前起始狀態值,
//真實情況中用html5的onprogress和onload來完成
//還可以跟後臺配合，通過ajax實時的返回數據
var iNow = 0;
//設定定時器
var timer = setInterval(function () {
//如果當前的值爲100
if (iNow == 100) {
//清除定時器
clearInterval(timer);
}
else {
//將當前狀態值累加1
iNow += 1;
//調用執行狀態的函數,傳入狀態值
progressFn(iNow);
}
}, 30);
function progressFn(cent) {
//獲取最外層的div
var oDiv1 = document.getElementById('progressBox');
//獲取內層進度條的div
var oDiv2 = document.getElementById('progressBar');
//獲取內層文字發生變化時的div
var oDiv3 = document.getElementById('progressText');
//獲取總進度條的寬度
var allWidth = parseInt(getStyle(oDiv1, 'width'));
//設定內層兩個div的文字內容一樣
oDiv2.innerHTML = cent + '%';
oDiv3.innerHTML = cent + '%';
//修改clip的的寬度值
oDiv2.style.clip = 'rect(0px, ' + cent / 100 * allWidth + 'px, 40px, 0px)';
//獲取當前元素的屬性值
function getStyle(obj, attr) {
//兼之IE
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
//第二個參數爲false是通用的寫法，目的是爲了兼容老版本
return getComputedStyle(obj, false)[attr];
}
}
}
};
</script>
</head>
<body>
<div id="progressBox">
<div id="progressBar">0%</div>
<!-- 設定第二個層以便當進度超過文字的時候，修改文字的顏色 -->
<div id="progressText">0%</div>
</div>
</body>
</html>