实现效果 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>progress</title> <style> .box{ position: relative; width: 600px; height: 20px; margin: 30px auto; background-color: #d5cfcf; border-radius: 10px; } .progress{ position: absolute; width:0; height: 100%; background-color: #5b738e; border-radius: 10px; } p{ position: absolute; left: 600px; top:-17px; } </style> </head> <body> <div class="box"> <div class="progress"></div> <p>10%</p> </div> <script> const progress = document.querySelector('.progress') const p =document.querySelector('p') let i = 0 setInterval(function(){ if(i<100){ i++ p.innerHTML=i+'%' progress.style.width=`${i}%` } },200) </script> </body> </html>
