正文

实用的Web进度条2007-07-24 13:10:00

【评论】 【打印】 【字体: 】 本文链接:http://blog.pfan.cn/tiay/27823.html

分享到:

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代码首先usingusing 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    }

阅读(3578) | 评论(0)


版权声明:编程爱好者网站为此博客服务提供商,如本文牵涉到版权问题,编程爱好者网站不承担相关责任,如有版权问题请直接与本文作者联系解决。谢谢!

评论

暂无评论
您需要登录后才能评论,请 登录 或者 注册