Js中进度条特效

最新推荐文章于 2025-06-16 14:26:48 发布

小木子~

最新推荐文章于 2025-06-16 14:26:48 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44022886/article/details/84976864

本文介绍了一个使用纯CSS和JavaScript实现的动态进度条效果，通过修改宽度属性来展示进度变化，适用于网页互动元素的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   <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.onclick=function () {
        var pro=0;
        var timer=setInterval(function () {
            pro+=1;
            if(pro<=100){
                progress.style.width=pro+'%';
            }
            else{
                clearInterval(timer);
            }
        },100)
    }