【JS】模拟进度条

效果图

点击“开始”按钮，进度条从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);
        }