最近室友想實現一個點擊按鈕時會有一個進度條加載的過程，所以嘗試做了一下。
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width:300px;
height:50px;
line-height:50px;
background:#fff;
position:relative;
cursor:pointer;
font-size:20px;
border:1px solid coral;
border-radius:26px;
overflow: hidden;
}
/* 進度條 */
.progressBar{
width:0;
height:100%;
left:0;
position:absolute;
overflow: hidden;
color:#fff;
background:coral;
z-index:2;
}
.right_text{
color:black;
}
.left_text{
background:coral;
}
.right_text,.left_text{
width:300px;
height:100%;
text-align:center;
}
</style>
</head>
<body>
<!-- 需求：
1.想要實現點擊一個按鈕的時候進度條開始進行加載
2.而且當進度條經過文字時，文字變成另外的顏色
3.需要注意的是排版
-->
<div class="box">
<div class="progressBar">
<div class="left_text">
開始加載
</div>
</div>
<div class="right_text" onclick="gostart()">
開始加載
</div>
</div>
<script>
var progressWidth = document.querySelector('.progressBar').clientWidth;
var boxWidth = document.querySelector('.box').clientWidth;
var steg = 0;
function gostart() {
let timer = setInterval(()=>{
steg+=20
document.querySelector('.progressBar').style.width = steg+'px'
if(steg>+boxWidth){
clearInterval(timer)
}
},1000)
}
</script>
</body>
</html>
一開始的效果圖如下：
點擊開始加載
加載過程中的效果圖如下：
