在网上查阅了很多相关资料,参照对比一番后自己整理了一下,做了个小例子。能够实现根据后台数据加载的进度在前台动态更新进度条、进度条在页面居中显示、在进度条内显示百分比,完成进度后隐藏进度条。个人感觉还是有一定的参考价值,贴出来先。
建立一个WEB工程,添加新项->HTML页面,命名为ProgressBar.htm,内容如下:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" id ="mainWindow" >
< head >
< title > 无标题页 </ title >
< script language ="javascript" >
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 id ="ProgressBarSide" style ="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none" >
< div id ="ProgressBar" style ="position:absolute;height:21px;width:0%;background-color:#3366FF" ></ div >
< div id ="ProgressText" style ="position:absolute;height:21px;width:100%;text-align:center" ></ div >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" id ="mainWindow" >
< head >
< title > 无标题页 </ title >
< script language ="javascript" >
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 id ="ProgressBarSide" style ="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none" >
< div id ="ProgressBar" style ="position:absolute;height:21px;width:0%;background-color:#3366FF" ></ div >
< div id ="ProgressText" style ="position:absolute;height:21px;width:100%;text-align:center" ></ div >
</ 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();
}
}
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();
}
}
前台页面代码在此省略,可以放置任意控件