进度条

游鹄君2025年8月24日小于 1 分钟
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>进度条</title>
  <style type="text/css">
  #out{width:400px;height:40px;border:solid 1px blue;margin:100px auto;overflow:hidden;}
 
  #ins{width:0px;height:40px;background:lightblue;text-align:right;line-height:40px;}
 
  </style>
</head>
<body>
  <div id='out'>
    
    <div id='ins'></div>
 
  </div>
 
  <script type="text/javascript">
  var out = document.getElementById('out');
 
  var ins = document.getElementById('ins');
 
  var step = 1;
 
  var into = setInterval(function(){
    //获取内部宽度
    var w = ins.offsetWidth;
    //获取新的
    var nw = w+step;
    //获取百分比
    var bai = nw / out.offsetWidth;
    //
    ins.innerHTML = Math.floor(bai*100)+'%';
    if(nw >= out.offsetWidth) {
 
     clearInterval(into);
 
    }
    //
    ins.style.width = nw+'px';
  },50)
  </script>
</body>
</html>