js实现进度条效果:这里实际上是用了两个div嵌套,一个设置宽度,另一个初始宽度为0,设置背景颜色,通过定时器改变宽度
<style>
.fa{
width: 400px;
margin-bottom: 30px;
border: 1px solid red;;
}
.son{
width: 0px;
height: 40px;
background-color: #f0f;
text-align: center;
line-height: 40px;
}
</style>
<div class="fa">
<div class="son">
<span>0</span><span>%</span>
</div>
</div>
<button id="but">安装</button>
<script>
// 逻辑:1.利用定时器来进行递增操作(width、百分数)
// 2.当变量 达到400px时,是停止定时器
let but = document.getElementById('but');
let div = document.getElementsByTagName('div');
let span = document.getElementsByTagName('span');
let timer = null;
but.onclick = function(){
let num = 0;
if(timer==null){
timer = setInterval(()=>{
num +=1;
// 给宽进行递增
div[1].style.width = num+'px';
// 给百分比递增
span[0].innerText = Math.ceil(num/400*100);
if(num==400){
clearInterval(timer);
}
},10);
}
}
</script>