简单的进度条实现

.box {
            width: 0;
            height: 50px;
            line-height: 50px;
            background-color: pink;
        }

<div class="box">0%</div>
    <button>开始</button>
    <script>
        var timer;
        var box = document.getElementsByClassName("box")[0];
        var btn = document.getElementsByTagName("button")[0];
        console.log(box.offsetWidth);
        btn.addEventListener("click",function(){
            clearInterval(timer);
            timer = setInterval(function(){
                if(box.offsetWidth < 500) {
                    box.style.width = box.offsetWidth + 5 + "px";
                    box.innerHTML = box.offsetWidth / 5 + "%";
                }else {
                    clearInterval(timer);
                }
            }, 16);
        });
    </script>

踩的坑一：
box.style.width拿不到元素的width：原因在于，只有的元素的css是内嵌式，style.width才能拿到数据并返回xx px，否则返回空；内联式的时候通过offsetWidth可以拿到width（包括padding、border），返回的是数值；
style.width可以设置元素宽度，但offsetWidth不可以设置宽度;