实现一个条形进度条

	<style>
	    #c1 {
	        width: 100%;
	        background-color: darkgray;
	    }
	
	    #c2 {
	        width: 10%;
	        background-color: darkcyan;
	        text-align: center;
	        color: white;
	        line-height: 30px;
	    }
	</style>
	
	<h1>Javascript进度条实现</h1>
	<!--两层结构，外面一层为容器，里面一层实现进度条-->
	<div id="c1">
	    <div id="c2">10%</div>
	</div>
	
	<br>
	<button id='btn'>加载</button>

    function move() {
        var id = document.getElementById("c2");  //返回对拥有指定 ID 的第一个对象的引用。
        var btn = document.getElementById('btn');
        btn.setAttribute("disabled", true); // 点击之后就把按钮禁用
        var width = 10;
        var temp = setInterval(go, 100);   //每0.1秒执行一次go函数
        function go() {
            if (width >= 100) {
                clearInterval(temp);     //停止setInterval
                btn.removeAttribute("disabled"); // 到了100%之后按钮取消禁用
            }
            else {
                width++;
                id.style.width = width + '%';    //使进度条百分比增长
                id.innerHTML = width + '%';
            }
        }
    }
    
	document.getElementById('btn').addEventListener('click', move);

// 这里采用的方法是禁用按钮的方式来防止多次点击触发事件，当然还可以采用防抖的方式去实现；
    /* function debounce(fn, delay) {
        let timer = null
        return function () {
            let context = this;
            let args = [...arguments];
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(context, args)
            }, delay)
        }
    } */