你的位置:首页 > Java教程

[Java教程]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" > <div id="val" ></div></div><div id="percent" >0%</div><div ></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()里面的命令可以使用字符串拼接