js實現進度條程式碼
阿新 • • 發佈：2020-12-12
首先我們要進行js進度條的佈局
js進度條佈局如下：
</script>
<style type="text/css" id='css'>
#progress {
position: fixed;
background: #000;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
#progress p {
width: 0px;
height: 30px;
border-radius: 3px;
background: #ffcccc;
color: #330000;
font-size: 14px;
font-weight: bold;
line-height: 30px;
text-align: center;
overflow: hidden;
font-family: 'Microsoft yahei';
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -250px;
}
body {
overflow: hidden;
}
</style>
</head>
<body>
<div 寫完了之後，就要開始寫js進度條載入的js程式碼了，程式碼如下：
var oP = document.getElementById('progress').getElementsByTagName('p')[0];
var oCss = document.getElementById('css');
function move(num) {
clearInterval(oP.timer);
oP.timer = setInterval(function () {
if (parseInt(oP.innerhtml) < num) {
var s = parseInt(oP.innerhtml) + 1;
var w = 500 * s / 100;
oP.innerHTML = s + '%';
oP.style.width = w + 'px';
} else {
clearInterval(oP.timer);
if (num == 100) {
oP.parentNode.parentNode.removeChild(oP.parentNode);
oCss.parentNode.removeChild(oCss);
var oScript = document.getElementsByClassName('pMove');
var length = oScript.length
for (var i = length - 1; i >= 0; i--) {
oScript[i].parentNode.removeChild(oScript[i]);
}
}
}
}, 10);
};
</script> 因為考慮到js執行是有先後的順序的，這裡大家一定要注意才行
廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com
js進度條全部原始碼展示：
<style type="text/css" id='css'>
#progress {
position: fixed;
background: #000;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
#progress p {
width: 0px;
height: 30px;
border-radius: 3px;
background: #ffcccc;
color: #330000;
font-size: 14px;
font-weight: bold;
line-height: 30px;
text-align: center;
overflow: hidden;
font-family: 'Microsoft yahei';
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -250px;
}
body {
overflow: hidden;
}
</style>
</head>
<body>
<div id='progress'>
<p>0%</p>
</div>
<script>
//js進度條程式碼
var oP = document.getElementById('progress').getElementsByTagName('p')[0];
var oCss = document.getElementById('css');
function move(num) {
clearInterval(oP.timer);
oP.timer = setInterval(function () {
if (parseInt(oP.innerHTML) < num) {
var s = parseInt(oP.innerHTML) + 1;
var w = 500 * s / 100;
oP.innerHTML = s + '%';
oP.style.width = w + 'px';
} else {
clearInterval(oP.timer);
if (num == 100) { //js進度條程式碼等於100表示載入完成
oP.parentNode.parentNode.removeChild(oP.parentNode);
oCss.parentNode.removeChild(oCss);
var oScript = document.getElementsByClassName('pMove');
var length = oScript.length
for (var i = length - 1; i >= 0; i--) {
oScript[i].parentNode.removeChild(oScript[i]);
}
}
}
}, 10);
};
</script>
</body>
<script class='pMove'>
move(100); //執行到body，表示js進度條已經載入完成，遮罩層退場
</script> js進度條原理解析：
這裡我們可以看到，進度條預設是0開始的，每走到一個地方，就會執行一個move函式，函式中有個數值，這個數值其實就是進度條走了多少了，我們可以去這樣的分析，因為網站原始碼是從上往下依次載入的，所以我們是不是就可以認為，讓網頁載入完成之後，頁面載入進度就是100%了呢，我們在後面加上一個move(100)，正好就是執行完了，所以這個方法是非常巧妙的。