进度条的使用(8)

最新推荐文章于 2024-02-04 12:42:38 发布

如果决定要走又何必挽留

最新推荐文章于 2024-02-04 12:42:38 发布

阅读量129

点赞数

分类专栏：代码练习文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_59076775/article/details/126863424

版权

代码练习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果图:

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .fa {
        width: 400px;
        margin-bottom: 30px;
        border: 1px solid red;
      }
      .son {
        width: 0px;
        height: 40px;
        background-color: pink;
        text-align: center;
        line-height: 40px;
      }
    </style>
  </head>
  <body>
    <div class="fa">
      <div class="son"><span>0</span><span>%</span></div>
    </div>
    <button id="but">安装</button>
  </body>

  <script>
    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 += 10;
        div[1].style.width = num + "px";
        span[0].innerText = Math.ceil((num/400) * 100);
        if (num == 400) {
          clearInterval(timer);
        }
      }, 100);
        
      }
    };
  </script>
</html>