一个简单的进度条演示。
<!doctype html> <html> <head> <meta charset="utf8"> <title>Process Bar</title> <script> var t; function s(c) { if(c<=100) { val.style.width=c+"%"; percent.innerHTML=c+"%"; btn.disabled=true; btnp.disabled=false; c=c+10; t=setTimeout("s("+c+")",500); } else { clearTimeout(t); btnc.disabled=false; btnp.disabled=true; return; } } function c() { clearTimeout(t); val.style.width="0px"; percent.innerHTML="0%"; btn.disabled=false; btnc.disabled=true; btnp.disabled=true; btnp.value='Pause'; } function p() { var temp; if('Pause' == btnp.value) { clearTimeout(t); btnp.value='Go on'; btnc.disabled=false; } else { temp=val.style.width; btnp.value='Pause'; var k=parseInt(delEnd(temp)); s(k); btnc.disabled=true; } } function delEnd(str) { var temp=""; for(var i=0; i < str.length-1; i++) { temp=temp+str[i]; } return temp; } </script> </head> <body> <div id="bar" style="300px; height:30px; border:solid 1px; float:left;"> <div id="val" style="height:100%; background-color:#03F; 0px;"></div> </div> <div id="percent" style="float:left; line-height:30px;">0%</div> <div style="clear:both"></div> <br /> <input id="btn" type="button" value="Start" onClick="s(0)" /> <br /> <input id="btnc" type="button" value="Clear" onClick="c()" disabled /> <br /> <input id="btnp" type="button" value="Pause" onClick="p()" disabled /> </body> </html>
感受：
1.在简单的页面里面，在<script>标签里面，可以直接使用id表示某个控件，而不需要使用document.getElementById()。
2.setTimeout()里面的命令可以使用字符串拼接
3.清除setTimeout()