javascript实现简单的进度条
示例一：
<!doctypehtml>
<html>
<head>
<metacharset="utf8">
<title>ProcessBar</title>
<script>
vart;
functions(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;
}
}
functionc()
{
clearTimeout(t);
val.style.width="0px";
percent.innerHTML="0%";
btn.disabled=false;
btnc.disabled=true;
btnp.disabled=true;
btnp.value='Pause';
}
functionp()
{
vartemp;
if('Pause'==btnp.value)
{
clearTimeout(t);
btnp.value='Goon';
btnc.disabled=false;
}
else
{
temp=val.style.width;
btnp.value='Pause';
vark=parseInt(delEnd(temp));
s(k);
btnc.disabled=true;
}
}
functiondelEnd(str)
{
vartemp="";
for(vari=0;i<str.length-1;i++)
{
temp=temp+str[i];
}
returntemp;
}
</script>
</head>
<body>
<divid="bar"style="width:300px;height:30px;border:solid1px;float:left;">
<divid="val"style="height:100%;background-color:#03F;width:0px;"></div>
</div>
<divid="percent"style="float:left;line-height:30px;">0%</div>
<divstyle="clear:both"></div>
<br/>
<inputid="btn"type="button"value="Start"onClick="s(0)"/>
<br/>
<inputid="btnc"type="button"value="Clear"onClick="c()"disabled/>
<br/>
<inputid="btnp"type="button"value="Pause"onClick="p()"disabled/>
</body>
</html>
再来分享一个结合.net的
建立一个WEB工程，添加新项->HTML页面，命名为ProgressBar.htm，内容如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"id="mainWindow">
<head>
<title>无标题页</title>
<scriptlanguage="javascript">
functionSetPorgressBar(pos)
{
//设置进度条居中
varscreenHeight=window["mainWindow"].offsetHeight;
varscreenWidth=window["mainWindow"].offsetWidth;
ProgressBarSide.style.width=Math.round(screenWidth/2);
ProgressBarSide.style.left=Math.round(screenWidth/4);
ProgressBarSide.style.top=Math.round(screenHeight/2);
ProgressBarSide.style.height="21px";
ProgressBarSide.style.display="";
//设置进度条百分比
ProgressBar.style.width=pos+"%";
ProgressText.innerHTML=pos+"%";
}
//完成后隐藏进度条
functionSetCompleted()
{
ProgressBarSide.style.display="none";
}
</script>
</head>
<body>
<divid="ProgressBarSide"style="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none">
<divid="ProgressBar"style="position:absolute;height:21px;width:0%;background-color:#3366FF"></div>
<divid="ProgressText"style="position:absolute;height:21px;width:100%;text-align:center"></div>
</div>
</body>
</html>
后台代码，Default.aspx.cs：
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Threading;
usingSystem.IO;
publicpartialclass_Default:System.Web.UI.Page
{
privatevoidbeginProgress()
{
//根据ProgressBar.htm显示进度条界面
stringtemplateFileName=Path.Combine(Server.MapPath("."),"ProgressBar.htm");
StreamReaderreader=newStreamReader(@templateFileName,System.Text.Encoding.GetEncoding("GB2312"));
stringhtml=reader.ReadToEnd();
reader.Close();
Response.Write(html);
Response.Flush();
}
privatevoidsetProgress(intpercent)
{
stringjsBlock="<script>SetPorgressBar('"+percent.ToString()+"');</script>";
Response.Write(jsBlock);
Response.Flush();
}
privatevoidfinishProgress()
{
stringjsBlock="<script>SetCompleted();</script>";
Response.Write(jsBlock);
Response.Flush();
}
privatevoidPage_Load(objectsender,System.EventArgse)
{
beginProgress();
for(inti=1;i<=100;i++)
{
setProgress(i);
//此处用线程休眠代替实际的操作，如加载数据等
System.Threading.Thread.Sleep(50);
}
finishProgress();
}
}