【JS】模拟进度条

最新推荐文章于 2024-04-20 11:16:57 发布

蘑菇栗子

最新推荐文章于 2024-04-20 11:16:57 发布

阅读量796

点赞数 1

分类专栏： js小实例/小功能文章标签： javascript css css3

本文链接：https://blog.csdn.net/xxxxxwxx/article/details/126437427

版权

js小实例/小功能专栏收录该内容

60 篇文章 0 订阅

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript创建一个可控制的进度条，点击开始后，进度条从0%自动增加到100%，并可通过多次点击暂停和继续。代码示例详细展示了如何利用setInterval和clearInterval实现动画效果。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述
点击“开始”按钮，进度条从0到100，自动停止，可多次点击

HTML

<div id="box">
        <div class="bar">
            <span>0%</span>
        </div>
    </div>
    <button onclick="fn()">开始</button>

CSS

#box {
            width: 400px;
            height: 300px;
            position: relative;
            border: solid 1px black;
            margin: 50px auto;
        }

        .bar {
            width: 0px;
            height: 30px;
            background: green;
            border-radius: 6px;
            position: absolute;
            top: 135px;
            line-height: 30px;
            text-align: center;
            color: #fff;
        }

JS

//进度条所在的盒子，调整其宽度可实现进度条效果
        var bar = box.querySelector(".bar");
        //进度条上显示的数字，调整其内容
        var span = box.querySelector('span');
        var w = 400;//最终宽度
        var times;//计时器
        function fn() {
            var wSmall = 0;//初始宽度为0
            times = setInterval(function () {
                wSmall += 20;//每次加20
                bar.style.width = wSmall + 'px';//宽度改变
                if (wSmall >= w) {//如果宽度超过最终宽度
                    clearInterval(times);//清空定时器
                }else{//设置进度条上的文字
                    span.innerHTML=Math.ceil(wSmall/10*2.62)+'%';
                }
            }, 100);
        }