效果图:
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.fa {
width: 400px;
margin-bottom: 30px;
border: 1px solid red;
}
.son {
width: 0px;
height: 40px;
background-color: pink;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div class="fa">
<div class="son"><span>0</span><span>%</span></div>
</div>
<button id="but">安装</button>
</body>
<script>
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 += 10;
div[1].style.width = num + "px";
span[0].innerText = Math.ceil((num/400) * 100);
if (num == 400) {
clearInterval(timer);
}
}, 100);
}
};
</script>
</html>