<h3>进度条</h3> <button onclick="start()">开始</button> <button onclick="stop()">暂停</button> <button onclick="end()">停止</button> <hr> <div id="wrap"> <div id="jd"></div> </div> <script> /* 扩展 */ // 获取对象 var jdObj = document.getElementById("jd"); // 设置定时器 var timer; // 开始的位置 var i = 0; var bj = false; // 定时器没有运行的时候 false; // 运行 function run(){ if(i>100){ clearInterval(timer); }else{ jdObj.style.width = i+'%'; i++; } } // 开始 function start(){ /* if(bj){ }else{ bj = true; timer = setInterval(run, 33) }*/ if(!bj){ bj = true; timer = setInterval(run, 33) } } // 暂停 function stop(){ bj = false; clearInterval(timer); } // 停止 function end(){ bj = false; i = 0; jdObj.style.width = '0'; clearInterval(timer); }