asp.net 实现进度条 用来显示加载进度或程序处理进度
2016-12-29 00:00
686 查看
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(); } private void beginProgress() { //根据ProgressBar.htm显示进度条界面 string templateFileName = System.IO.Path.Combine(Server.MapPath("."), "ProgressBar.htm"); System.IO.StreamReader reader = new System.IO.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(); }
<!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" type="text/javascript"> function SetPorgressBar(pos) { //设置进度条居中 var screenHeight = document.body.offsetHeight; var screenWidth = document.body.offsetWidth; document.getElementById("ProgressBarSide").style.width = Math.round(screenWidth / 2); document.getElementById("ProgressBarSide").style.left = Math.round(screenWidth / 4); document.getElementById("ProgressBarSide").style.top = Math.round(screenHeight / 2); document.getElementById("ProgressBarSide").style.height = "21px"; document.getElementById("ProgressBarSide").style.display = ""; //设置进度条百分比 document.getElementById("ProgressBar").style.width = pos + "%"; document.getElementById("ProgressText").innerHTML = pos + "%"; } //完成后隐藏进度条 function SetCompleted() { document.getElementById("ProgressBarSide").style.display = "none"; } </script> </head> <body> <div id="ProgressBarSide" style="position:absolute;height:21px;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none"> <div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color: green"></div> <div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div> </div> </body> </html>
相关文章推荐
- Asp.net页面生存周期
- asp.net读取Xml文件到DataSet,以及DataSet保存为Xml,利用自带的强大功能
- asp.net(C#)数据采集类
- asp.net上传execl文件后,在页面上加载显示。
- asp.net(C#)中Repeater嵌套绑定Repeater
- c#(asp.net) 多线程示例,用于同时处理多个任务
- asp.net中配置使用Sqlite轻型数据库
- asp.net或者MVC定时自动执行某操作
- asp.net 直接Response输出WML页面
- asp.net 中将汉字转换成拼音
- asp.net(C#)常用时间日期处理类
- asp.net微软图表控件使用示例
- asp.net清除页面缓存,防止页面回退重复提交数据及防止同一用户同时登录
- Asp.Net读取Execl常见问题收集
- asp.net数据采集基类
- asp.net(C#)利用QRCode生成二维码(续)-在二维码图片中心加Logo或图像
- Asp.Net MVC4 系列-- 进阶篇之路由(1)
- asp.net中两个ListBox 左右互相移动,以及上移、下移
- asp.net(C#)中将DataTable导出Execl、Word、Xml
- 很不错的asp.net文件上传类c# 搜索文件 移动文件 删除文件等