Js中进度条特效

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

小木子~

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

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/weixin_44022886/article/details/84976864

版权

   <style>
        .bigbox{
            width: 100%;
            height: 40px;
            background-color: aliceblue;
        }
        .smallbox{
            width: 1%;
            height: 40px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
<div class="bigbox">
    <div class="smallbox" id="progress"></div>
</div>
<button id="idd">start</button>
<script>
    var progress=document.getElementById("progress");
    var idd=document.getElementById("idd");
    idd.οnclick=function () {
        var pro=0;
        var timer=setInterval(function () {
            pro+=1;
            if(pro<=100){
                progress.style.width=pro+'%';
            }
            else{
                clearInterval(timer);
            }
        },100)
    }