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>

再来分享一个结合.net的
建立一个WEB工程，添加新项->HTML页面，命名为ProgressBar.htm，内容如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" id="mainWindow"><head><title>无标题页</title><script language="javascript">function SetPorgressBar（pos）{//设置进度条居中var screenHeight = window["mainWindow"].offsetHeight;var screenWidth = 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 + "%";}//完成后隐藏进度条function SetCompleted（）{ProgressBarSide.style.display = "none";} </script> </head><body><div id="ProgressBarSide" style="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none"><div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color:#3366FF"></div><div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div></div></body></html>

后台代码，Default.aspx.cs：

using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Threading;using System.IO;public partial class _Default : System.Web.UI.Page {private void beginProgress（）{//根据ProgressBar.htm显示进度条界面string templateFileName = Path.Combine（Server.MapPath（"."）, "ProgressBar.htm"）;StreamReader reader = new StreamReader（@templateFileName,System.Text.Encoding.GetEncoding（"GB2312"））;string html = reader.ReadToEnd（）;reader.Close（）;Response.Write（html）;Response.Flush（）;}private void setProgress（int percent）{string jsBlock = "<script>SetPorgressBar（"" + percent.ToString（） + ""）; </script>";Response.Write（jsBlock）;Response.Flush（）;}private void finishProgress（）{string jsBlock = "<script>SetCompleted（）;</script>";Response.Write（jsBlock）;Response.Flush（）;}private void Page_Load（object sender, System.EventArgs e） {beginProgress（）;for （int i = 1; i <= 100; i++）{setProgress（i）;//此处用线程休眠代替实际的操作，如加载数据等System.Threading.Thread.Sleep（50）;}finishProgress（）; } }