实用的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>.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.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>首先using
using System.Threading;using System.IO;using System.Text;public class progressbar : System.Web.UI.Page {
Page_Load 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 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 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 LoadData private void LoadData() { for(int m=0;m<90000;m++) { for(int i=0;i<90000;i++) { } } } #endregion Web Form Designer generated code 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 }
