原生js实现进度条

最新推荐文章于 2024-08-02 18:20:19 发布

jennyya

最新推荐文章于 2024-08-02 18:20:19 发布

阅读量987

点赞数

分类专栏： js 文章标签：进度条

本文链接：https://blog.csdn.net/jennyya/article/details/83959373

版权

js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

只是一个练习，比较简陋

样式和结构如下：

    <style>
        .bar{
            width: 300px;
            height: 30px;
            border: 1px solid black;
            border-radius: 5px;
            background: #cecece;
            display: flex;
            align-items: center
        }
        .load{
            width: 0;
            height: 28px;
            background: yellow;
        }
    </style>
<div class="bar">
    <div class="load"></div>
</div>

js代码如下：

<script>
   var oLoad=document.getElementsByClassName("load")[0];
   var count=0;
   var timer=setInterval(function(){
       oLoad.style.width=++count+"%";
       if(count==80){
           clearInterval(timer)
       }

   },30)
</script>

运行结果