- <html>
- <style type="text/CSS">
- #bar{width:0px; height:20px;
- background:#ee00ff;}// 定义进度条的前景色
- </style>
- <script>
- var act;
- function over(){
- var w=document.getElementById("bar").style.pixelWidth;
- if (w<400){
- document.getElementById("bar").style.pixelWidth=w+2;
- document.getElementById("txt").innerText="Loading..."+Math.floor((w/400)*100)+"%";
- clearTimeout(act);
- act=setTimeout(over,10);
- } else{document.getElementById("txt").innerText="载入完成 100%";
- };
- };
- function out(){
- var w=document.getElementById("bar").style.pixelWidth;
- if (w>0){
- document.getElementById("bar").style.pixelWidth=w-2;
- document.getElementById("txt").innerText="Loading..."+Math.floor((w/400)*100)+"%";
- clearTimeout(act);
- act=setTimeout(out,10);
- } else{document.getElementById("txt").innerText="载入完成 0%";
- };
- };
- function Apouse(){
- clearTimeout(act);
- };
- </script>
- <button onclick="over()"> 开始转入 </button><br>
- <button onclick="out()"> 开始卸载 </button><br><br>
- <button onclick="Apouse()"> 暂停 </button><br><br>
- <h4 id="txt"> 等待载入 </h4>
- <div id="bar"></div>
- </html>
来源: http://www.bubuko.com/infodetail-2653710.html