需要用到定时器，简单模拟实现百度下载时的进度条，详细代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.fa {
width: 400px;
margin-bottom: 30px;
border: 1px solid red;
}
.son {
width: 0px;
height: 40px;
background-color: #f0f;
text-align: center;
line-height: 40px;
/*让height值等于行高line-height值，文本内容垂直显示*/
}
</style>
</head>
<body>
<div class="fa">
<div class="son">
<span>0</span><span>%</span>
</div>
</div>
<button id="but">安装</button>
<script>
//利用定时器来进行递增操作（width、百分数），当变量达到400px要停止定时器
let but = document.getElementById('but');
let div = document.getElementsByTagName('div');
let span = document.getElementsByTagName('span');
let num = 0;
let timer = null;
but.onclick = function () {
//需要利用一个if进行判断，否则如果多次点击，会开启多个定时器，在用到定时器的地方都要进行判断，只开启一个定时器
if (timer == null) {
timer = setInterval(() => {//定时器es6的写法,开启定时器
num += 20;
//给宽递增
div[1].style.width = num + 'px';
//显示百分比
span[0].innerText = Math.ceil((num / 400) * 100);
if (num == 400) {
clearInterval(timer);//当宽度达到外边div的宽度400px时，取消定时器
}
}, 1000);
}
}
</script>
</body>
</html>结果：
当点击安装按钮时，开始动态显示下载进度，这里以图片为例：
Please pay attention
977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
