这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
首先:建立两个类,一个是用来与资料进行连接(数据层),另一个是用来关联前一个类与页面的(逻辑层) 新建一个 JScsrip.js 文件 代码如下:
这个例子是通过测试的。是真真正正根据记录的条数挂钩的。
- function setPgb(pgbID, pgbValue,pvalues)
- {
- if ( pgbValue <= pvalues )
- {
- if (lblObj = document.getElementById(pgbID+'_label'))
- {
- lblObj.innerhtml =Math.ceil((pgbValue/pvalues)*100) + '%'; // change the label value
- }
- if ( pgbObj = document.getElementById(pgbID) )
- {
- var divChild = pgbObj.children[0];
- pgbObj.children[0].style.width = Math.ceil((pgbValue/pvalues)*240);//pgbValue;
- }
- window.status = "数据读取第" + pgbValue+"条,请稍候";
- }
- if ( pgbValue == pvalues )
- {
- window.status = "数据读取已经完成";
- proBar.style.display="none";
- Table1.style.display="none";
- }
- }
建立一个 common.CSS 代码如下:
- .bi-loading-status
- {
- /**//*position: absolute;*/
- width: 250px;
- 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);
- }
建立一个 progressbar.htm 代码如下:
- <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=" LEFT: 425px; TOP: 278px"
- align="left">
- <DIV class="text" id="pgbMain_label" align="left">
- </DIV>
- <DIV class="progress-bar" id="pgbMain" align="left">
- <DIV STYLE="WIDTH:5%">
- </DIV>
- </DIV>
- </DIV>
- </td>
- </tr>
- </table>
- </body>
建立一个 Default.aspx 文件 前台代码如下:
- <head>
- <script language="javascript" src="JScript.js" type="text/javascript"></script>
- </head>
- <body >
- <form id="Form1" method="post" runat="server">
- <asp:GridView ID="GridView1" runat="server">
- </asp:GridView>
- </form>
- </body>
后台代码如下:
- public partial class _Default : System.web.UI.Page
- {
- DataSet ds;
- text ts = new text();
- int count = 0;
- #region Page_Load
- private void Page_Load(object sender, System.EventArgs e)
- {
- if (!Page.IsPostBack)
- {
- ds = Getgridview();
- count = ds.Tables[0].Rows.Count;
- Response.Write("count=" + count);
- string strFileName = Server.MapPath("progressbar.htm");
- StreamReader sr = new StreamReader(strFileName, System.Text.Encoding.Default);
- string strHtml = sr.ReadToEnd();
- Response.Write("<div style='align:center;valign:bottom;'>" + strHtml + "</div>");
- sr.Close();
- Response.Flush();
- Thread thread = new Thread(new ThreadStart(ThreadProc));
- thread.Start();
- LoadData(ds);
- // Getgridview();
- //load数据
- thread.Join();
- }
- }
- #endregion fixedHeader
- #region Getgridview
- protected DataSet Getgridview()
- {
- ds = ts.QueryProcS("2009/07", "XXXX");//这个是逻辑层中的一个方法
- return ds;
- }
- #endregion
- #region ThreadProc
- private void ThreadProc()
- {
- string strScript = "<script>setPgb('pgbMain','{0}','" + count + "');</script>";
- for (int i = 0; i <= count; i++)
- {
- System.Threading.Thread.Sleep(80);
- Response.Write(string.Format(strScript, i));
- Response.Flush();
- }
- }
- #endregion LoadData
- #region LoadData
- private void LoadData(DataSet dds)
- {
- for (int m = 0; m < count; m++)
- {
- for (int i = 0; i < dds.Tables[0].Columns.Count; i++)
- {
- }
- }
- this.GridView1.DataSource = dds.Tables[0].DefaultView;
- this.GridView1.DataBind();
- }
- #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
- }
启动加载页面时如下图所示。
加载完后会自动显示你要显示的数据。
来源: http://www.phperz.com/article/17/0418/286874.html