实用的Web进度条

最新推荐文章于 2013-08-28 17:23:06 发布

转载最新推荐文章于 2013-08-28 17:23:06 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gllgsoft/archive/2008/08/29/1279464.html

文章标签：

#javascript #ui #c# #ViewUI

本文介绍了一个使用HTML、CSS及JavaScript实现的自定义进度条示例。通过动态更新进度条的宽度来显示加载过程，并利用线程模拟数据加载，同时展示了如何在网页中嵌入进度条并实时更新其状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.建立进度条html页面progressbar.htm

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>

</head>

<tr>

</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>

</HEAD>

<%=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 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

}

转载于:https://www.cnblogs.com/gllgsoft/archive/2008/08/29/1279464.html