进度条
自己写的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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>
</head>
<body>
<div class="fa">
<div class="son">
<span>0</span><span>%</span>
</div>
</div>
<button id="btn">安装</button>
<script type="text/javascript">
// 实现逻辑：外边一个框，里面放一个有背景颜色的框，点击的时候里面的框的宽度不断扩大，计算里面的框和外面的框的百分比。
// 利用定时器进行递增操作
// 当变量达到400px时，停止定时器
let btn = document.getElementById('btn')
let div = document.getElementsByTagName('div')
let span = document.getElementsByTagName('span')
console.log(btn)
btn.onclick = function() {
let num = 0;
timer = setInterval(()=>{
num+=1;
if(num>400){
clearInterval(timer)
}
else{
div[1].style.width = num+'px'
span[0].innerText = num/4
}
},10)
}
</script>
</body>
</html>
b站上的案例
<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>
