实用的Web进度条

 实用的Web进度条 1.建立进度条html页面progressbar.htm < script  language ="javascript" >  function setPgb(pgbID, pgbValue) {     if ( pgbValue <= 100 )     {         //debugger;        if (lblObj = document.getElementById(pgbID+'_label'))         {             lblObj.innerHTML = pgbValue + '%'; // change the label value         }         if ( pgbObj = document.getElementById(pgbID) )         {             var divChild = pgbObj.children[0];             pgbObj.children[0].style.width = pgbValue + "%";         }         window.status = "数据读取" + pgbValue + "%，请稍候";     }     if ( pgbValue == 100 )     {        window.status = "数据读取已经完成";         proBar.style.display="none";        Table1.style.display="none";    }}  </ script > < html >      < head >          < link  rel ="stylesheet"  type ="text/css"  href ="common.css"   />      </ head >      < body  topmargin ="0"  leftmargin ="0" >          < table  width ="100%"  height ="100%"  ID ="Table1"  runat =server >              < tr >                  < td  align ="center"  valign ="middle" >                      < DIV  class ="bi-loading-status"  id ="proBar"  style ="DISPLAY: ; LEFT: 425px; TOP: 278px" >                          < DIV  class ="text"  id ="pgbMain_label"  align ="left" ></ DIV >                          < DIV  class ="progress-bar"  id ="pgbMain"  align ="left" >                              < DIV  STYLE ="WIDTH:10%" ></ DIV >                          </ DIV >                      </ DIV >                  </ td >              </ tr >          </ table >      </ body > </ html > 2.建立样式common.css .bi-loading-status  {} { /**//*position: absolute;*/ width: 150px; padding: 1px; overflow: hidden; }  .bi-loading-status .text  {} { white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; padding: 1px; }  .bi-loading-status .progress-bar  {} { border: 1px solid ThreeDShadow; background: window; height: 10px; width: 100%; padding: 1px; overflow: hidden; }  .bi-loading-status .progress-bar div  {} { background: Highlight; overflow: hidden; height: 100%; filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); }   3.建立测试页面 3.1html代码 < HTML >      < HEAD >          < title > progressbar </ title >          < meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >          < meta  name ="CODE_LANGUAGE"  Content ="C#" >          < meta  name ="vs_defaultClientScript"  content ="JavaScript" >          < meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >      </ HEAD >      < body  MS_POSITIONING ="GridLayout" >          < form  id ="Form1"  method ="post"  runat ="server" >                          <% = fixedHeader() %>          </ form >      </ body > </ HTML > 3.2cs代码 首先using using  System.Threading; using  System.IO; using  System.Text; 然后添加代码 public   class  progressbar : System.Web.UI.Page     {        Page_Load#region Page_Load        private void Page_Load(object sender, System.EventArgs e)        {            if(!Page.IsPostBack)            {                string strFileName =Server.MapPath("progressbar.htm" );                 StreamReader sr = new StreamReader( strFileName, System.Text.Encoding.Default );                 string strHtml = sr.ReadToEnd();                 Response.Write( strHtml );                 sr.Close();                 Response.Flush();                 Thread thread = new Thread(new ThreadStart(ThreadProc));                 thread.Start();                 LoadData();//load数据                 thread.Join();            }        }        #endregion        fixedHeader#region fixedHeader        protected string fixedHeader()        {                StringBuilder s=new StringBuilder();            s.Append(@"<table width='100%' border='1' cellspacing='0' style='MARGIN-TOP:-2px'>");            s.Append(@"<TR class='fixedHeaderTr' style='BACKGROUND:navy;COLOR:white'>");            s.Append(@"<TD nowrap>Header A</TD>");            s.Append(@"<TD nowrap>Header B</TD>");            s.Append(@"<TD nowrap>Header C</TD>");            s.Append(@"</TR>");            for(int m=0;m<100;m++)            {                s.Append(@"<TR>");                s.Append(@"<TD>A").Append(m).Append("</TD>");                s.Append(@"<TD>B").Append(m).Append("</TD>");                s.Append(@"<TD>C").Append(m).Append("</TD>");                s.Append(@"</TR>");            }                        s.Append(@"</table>");                        return s.ToString();                    }        #endregion        ThreadProc#region ThreadProc        private void ThreadProc()         {             string strScript = "<script>setPgb('pgbMain','{0}');</script>";             for ( int i = 0; i <= 100; i++ )             {                 System.Threading.Thread.Sleep(10);                 Response.Write( string.Format( strScript, i));                 Response.Flush();             }         }        #endregion        LoadData#region LoadData        private void LoadData()        {            for(int m=0;m<90000;m++)            {                for(int i=0;i<90000;i++)                {                                }             }         }        #endregion        Web Form Designer generated code#region Web Form Designer generated code        override protected void OnInit(EventArgs e)        {            //            // CODEGEN: This call is required by the ASP.NET Web Form Designer.            //            InitializeComponent();            base.OnInit(e);        }                /**//// <summary>        /// Required method for Designer support - do not modify        /// the contents of this method with the code editor.        /// </summary>        private void InitializeComponent()        {                this.Load += new System.EventHandler(this.Page_Load);        }        #endregion    } 4.源代码下载 /Files/singlepine/processbar.rar