ASP.NET 進度條

1. 進度條模板文件 ProgressBar.htm
 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.  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     }

3.  運行 Default.aspx , 效果如下:
 
轉載:http://www.cnblogs.com/anjou/archive/2006/10/27/541741.html  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章