使用js实现进度条效果

小灿同学+1

已于 2023-09-05 14:05:08 修改

阅读量549

点赞数 2

文章标签： javascript 开发语言前端

于 2023-08-29 21:43:55 首次发布

本文链接：https://blog.csdn.net/xiaocantongxue/article/details/132570803

版权

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/font-awesome.css">
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <div class="container">
      <div class="progress">
        <div class="progress-bar" style="background: #f20606; width: 10%">
          <span></span>
        </div>
      </div>

      <div class="progress">
        <div class="progress-bar" style="background: #005394; width: 10%">
          <span></span>
        </div>
      </div>

      <div class="progress">
        <div class="progress-bar" style="background: #fdc50d; width: 10%">
          <span></span>
        </div>
      </div>
    </div>

    <script>
      //1.获取所有的进度条
      var progressBars = document.getElementsByClassName('progress-bar');
      function fn(progress,width,time) {
        //2.获取span标签
        var spa = progress.getElementsByTagName('span')[0];
        //3.设置初始宽度
        var initialWidth = 0;
        //4.设置一个定时器,并设置一个变量保存定时器的返回值
        var timer = setInterval(() => {
          initialWidth++;
          //5.拼接字符串
          progress.style.width = initialWidth + '%';
          //6.给span设置内容
          spa.innerHTML = initialWidth + '%';

          if(initialWidth === width){
            //7.清除定时器
            clearInterval(timer);
          }
        }, time);
      }

      fn(progressBars[0],90,100);
      fn(progressBars[1],50,200);
      fn(progressBars[2],100,100);
    </script>
  </body>