一个简单的进度条演示。
<!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="width:300px; height:30px; border:solid 1px; float:left;">
<div id="val" style="height:100%; background-color:#03F; width: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()