ASP.NET 进度条(附源代码)
1. 进度条模板文件 ProgressBar.htm
3. 运行 Default.aspx , 效果如下:
源代码:ProgressBar.rar
本文地址: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>正在加载

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.cs
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 , 效果如下:
源代码:ProgressBar.rar
本文地址:http://www.cnblogs.com/anjou/archive/2006/10/27/541741.html
分类:
.NET
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架