1. 进度条模板文件 ProgressBar.htm
3. 运行 Default.aspx , 效果如下:
转载: http://www.cnblogs.com/anjou/archive/2006/10/27/541741.html
1
<
html
>
2 < head >
3 < title ></ title >
4 < script language ="javascript" >
5 // 设置进度条进度
6 function SetPorgressBar(msg, pos)
7 {
8 ProgressBar.style.width = pos + " % " ;
9 WriteText( " Msg1 " ,msg + " 已完成 " + pos + " % " );
10 }
11
12 // 设置进度条完成信息
13 function SetCompleted(msg)
14 {
15 if (msg == "" )
16 WriteText( " Msg1 " , " 完成。 " );
17 else
18 WriteText( " Msg1 " ,msg);
19 }
20
21 // 更新文本显示信息
22 function WriteText(id, str)
23 {
24 var strTag = ' < font face = " Verdana, Arial, Helvetica " size = " 2 " color = " #ea9b02 " >< B > ' + str + ' </ B ></ font > ';
25 if (document.all) document.all[id].innerHTML = strTag;
26 }
27 </ script >
28 </ head >
29 < body >
30 < div id ="Msg1" >< font face ="Verdana, Arial, Helvetica" size ="2" color ="#ea9b02" >< b > 正在加载 </ b ></ font ></ div >
31 < div id ="ProgressBarSide" style ="color:Silver;border-width:1px;border-style:Solid;width:300px;" >
32 < div id ="ProgressBar" style ="background-color:#3366FF; height:21px; width:0%;" ></ div >
33 </ div >
34 </ body >
35 </ html >
2 < head >
3 < title ></ title >
4 < script language ="javascript" >
5 // 设置进度条进度
6 function SetPorgressBar(msg, pos)
7 {
8 ProgressBar.style.width = pos + " % " ;
9 WriteText( " Msg1 " ,msg + " 已完成 " + pos + " % " );
10 }
11
12 // 设置进度条完成信息
13 function SetCompleted(msg)
14 {
15 if (msg == "" )
16 WriteText( " Msg1 " , " 完成。 " );
17 else
18 WriteText( " Msg1 " ,msg);
19 }
20
21 // 更新文本显示信息
22 function WriteText(id, str)
23 {
24 var strTag = ' < font face = " Verdana, Arial, Helvetica " size = " 2 " color = " #ea9b02 " >< B > ' + str + ' </ B ></ font > ';
25 if (document.all) document.all[id].innerHTML = strTag;
26 }
27 </ script >
28 </ head >
29 < body >
30 < div id ="Msg1" >< font face ="Verdana, Arial, Helvetica" size ="2" color ="#ea9b02" >< b > 正在加载 </ b ></ font ></ div >
31 < div id ="ProgressBarSide" style ="color:Silver;border-width:1px;border-style:Solid;width:300px;" >
32 < div id ="ProgressBar" style ="background-color:#3366FF; height:21px; width:0%;" ></ div >
33 </ div >
34 </ body >
35 </ html >
2. Default.aspx
1
protected
void
Page_Load(
object
sender, EventArgs e)
2 {
3 // 根据 ProgressBar.htm 显示进度条界面
4 string templateFileName = Path.Combine(Server.MapPath( " . " ), " ProgressBar.htm " );
5 StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding( " gb2312 " ));
6 string html = reader.ReadToEnd();
7 reader.Close();
8 Response.Write(html);
9 Response.Flush();
10 System.Threading.Thread.Sleep( 200 );
11
12 // 根据处理任务处理情况更新进度条
13 string jsBlock;
14 for ( int i = 1 ; i <= 100 ; i ++ )
15 {
16 System.Threading.Thread.Sleep( 10 );
17 jsBlock = " <script>SetPorgressBar(' " + " A " + i.ToString() + " ',' " + i.ToString() + " '); </script> " ;
18
19 Response.Write(jsBlock);
20 Response.Flush();
21 }
22
23 // 处理完成
24 jsBlock = " <script>SetCompleted('处理完成。'); </script> " ;
25 Response.Write(jsBlock);
26 Response.Flush();
27 }
2 {
3 // 根据 ProgressBar.htm 显示进度条界面
4 string templateFileName = Path.Combine(Server.MapPath( " . " ), " ProgressBar.htm " );
5 StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding( " gb2312 " ));
6 string html = reader.ReadToEnd();
7 reader.Close();
8 Response.Write(html);
9 Response.Flush();
10 System.Threading.Thread.Sleep( 200 );
11
12 // 根据处理任务处理情况更新进度条
13 string jsBlock;
14 for ( int i = 1 ; i <= 100 ; i ++ )
15 {
16 System.Threading.Thread.Sleep( 10 );
17 jsBlock = " <script>SetPorgressBar(' " + " A " + i.ToString() + " ',' " + i.ToString() + " '); </script> " ;
18
19 Response.Write(jsBlock);
20 Response.Flush();
21 }
22
23 // 处理完成
24 jsBlock = " <script>SetCompleted('处理完成。'); </script> " ;
25 Response.Write(jsBlock);
26 Response.Flush();
27 }
3. 运行 Default.aspx , 效果如下:
转载: http://www.cnblogs.com/anjou/archive/2006/10/27/541741.html