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> ``` 效果图：