Javascript进度条

2024-04-27 14:07:47

字体：大中小

来源：转载

供稿：网友

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

3.清除setTimeout()

上一篇：关于类似(i++)+(++i)

下一篇：Javascript学习笔记（一）