简易进度条功能

简易进度条功能

<div class="a">
        <div class="b">
            <span class="span">0</span><span>%</span>
        </div>
    </div>
    <button>开始</button>

let btn = document.querySelector('button');
        let span = document.querySelector('.span');
        let b = document.querySelector('.b');
        let timer = null; //防抖操作
        btn.addEventListener('click', function() {
            let num = 0;
            if (timer == null) {
                timer = setInterval(() => {
                    num += 10;
                    //给宽递增
                    b.style.width = num + "px";
                    // 给百分比递增
                    span.innerText = Math.ceil((num / 400) * 100); //取整
                    if (num == 400) {
                        clearInterval(timer);
                    }


                }, 100)
            }

        })