网页进度条实现-CSDN博客

在网上查阅了很多相关资料，参照对比一番后自己整理了一下，做了个小例子。能够实现根据后台数据加载的进度在前台动态更新进度条、进度条在页面居中显示、在进度条内显示百分比，完成进度后隐藏进度条。个人感觉还是有一定的参考价值，贴出来先。

建立一个WEB工程，添加新项->HTML页面，命名为ProgressBar.htm，内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

function SetPorgressBar(pos)

{

//设置进度条居中

var screenHeight = window["mainWindow"].offsetHeight;

var screenWidth = window["mainWindow"].offsetWidth;

ProgressBarSide.style.width = Math.round(screenWidth / 2);

ProgressBarSide.style.left = Math.round(screenWidth / 4);

ProgressBarSide.style.top = Math.round(screenHeight / 2);

ProgressBarSide.style.height = "21px";

ProgressBarSide.style.display = "";

//设置进度条百分比

ProgressBar.style.width = pos + "%";

ProgressText.innerHTML = pos + "%";

}

//完成后隐藏进度条

function SetCompleted()

{

ProgressBarSide.style.display = "none";

}

</script>

</head>

<body>

</div>

</body>

</html>

后台代码，Default.aspx.cs

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Threading;

using System.IO;

public partial class _Default : System.Web.UI.Page

{

private void beginProgress()

{

//根据ProgressBar.htm显示进度条界面

string templateFileName = Path.Combine(Server.MapPath("."), "ProgressBar.htm");

StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding("GB2312"));

string html = reader.ReadToEnd();

reader.Close();

Response.Write(html);

Response.Flush();

}

private void setProgress(int percent)

{

string jsBlock = "<script>SetPorgressBar('" + percent.ToString() + "'); </script>";

Response.Write(jsBlock);

Response.Flush();

}

private void finishProgress()

{

string jsBlock = "<script>SetCompleted();</script>";

Response.Write(jsBlock);

Response.Flush();

}

private void Page_Load(object sender, System.EventArgs e)

{

beginProgress();

for (int i = 1; i <= 100; i++)

{

setProgress(i);

//此处用线程休眠代替实际的操作，如加载数据等

System.Threading.Thread.Sleep(50);

}

finishProgress();

}

前台页面代码在此省略，可以放置任意控件。

在此感谢Clark's Life 的博主,我在做考试编排系统的过程中使用了他的这个进度条效果,感觉很棒,特转帖于此,并表示衷心的感谢!版权归原作者所有

ASP.NET实现进度条