Javascript進度條

標籤：

一個簡單的進度條示範。

<!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()裡面的命令可以使用字串拼接

Javascript進度條