实用的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