当前位置:首页 > 开发 > Web前端 > 前端 > 正文

asp.net 页面加载进度

发表于: 2014-11-18   作者:atoooo   来源:转载   浏览次数:
asp
摘要:   private void Page_Load(object sender, System.EventArgs e)   {       beginProgress();      
 
  1. private void Page_Load(object sender, System.EventArgs e)  
  2. {  
  3.     beginProgress();  
  4.     for (int i = 1; i <= 100; i++)  
  5.     {  
  6.         setProgress(i);  
  7.         //此处用线程休眠代替实际的操作,如加载数据等     
  8.         System.Threading.Thread.Sleep(50);  
  9.     }  
  10.   
  11.     finishProgress();  
  12. }     
  13.   
  14. private void beginProgress()  
  15. {  
  16.     //根据ProgressBar.htm显示进度条界面     
  17.     string templateFileName = System.IO.Path.Combine(Server.MapPath("."), "ProgressBar.htm");  
  18.     System.IO.StreamReader reader = new System.IO.StreamReader(@templateFileName, System.Text.Encoding.GetEncoding("GB2312"));  
  19.     string html = reader.ReadToEnd();  
  20.     reader.Close();  
  21.     Response.Write(html);  
  22.     Response.Flush();  
  23. }  
  24.   
  25. private void setProgress(int percent)  
  26. {  
  27.     string jsBlock = "<script>SetPorgressBar('" + percent.ToString() + "'); </script>";  
  28.     Response.Write(jsBlock);  
  29.     Response.Flush();  
  30. }  
  31.   
  32. private void finishProgress()  
  33. {  
  34.     string jsBlock = "<script>SetCompleted();</script>";  
  35.     Response.Write(jsBlock);  
  36.     Response.Flush();  
  37. }  

[html]  view plain copy print ?
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" id="mainWindow">  
  3. <head>  
  4.     <title>无标题页</title>  
  5.     <script language="javascript" type="text/javascript">  
  6.         function SetPorgressBar(pos) {  
  7.             //设置进度条居中  
  8.             var screenHeight = document.body.offsetHeight;  
  9.             var screenWidth = document.body.offsetWidth;  
  10.             document.getElementById("ProgressBarSide").style.width = Math.round(screenWidth / 2);  
  11.             document.getElementById("ProgressBarSide").style.left = Math.round(screenWidth / 4);  
  12.             document.getElementById("ProgressBarSide").style.top = Math.round(screenHeight / 2);  
  13.             document.getElementById("ProgressBarSide").style.height = "21px";  
  14.             document.getElementById("ProgressBarSide").style.display = "";  
  15.   
  16.             //设置进度条百分比                         
  17.             document.getElementById("ProgressBar").style.width = pos + "%";  
  18.             document.getElementById("ProgressText").innerHTML = pos + "%";  
  19.         }  
  20.   
  21.         //完成后隐藏进度条  
  22.         function SetCompleted() {  
  23.             document.getElementById("ProgressBarSide").style.display = "none";  
  24.         }  
  25.      </script>    
  26. </head>  
  27.     <body>  
  28.     <div id="ProgressBarSide" style="position:absolute;height:21px;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none">  
  29.         <div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color: green"></div>  
  30.         <div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div>  
  31.     </div>  
  32.     </body>  
  33. </html>  

注意:

1. Response.Write() 中的内容必须大于256字节,Flush 才有效.

 

asp.net 页面加载进度

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
页面 Loading 条基本人人都会用。它的原理很简单:在页头放置一个文字或者图片的 loading 状态,然
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看
图片预览: 演示代码: <html> <head> <title>正在载入...</title> <me
我定义了两个用户控件。 Definition1 = (Definition) Page.LoadControl( " ModuleControl/Definitio
我定义了两个用户控件。 Definition1 = (Definition) Page.LoadControl( " ModuleControl/Definitio
介绍 使用许多小得JS、CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维护性,这是一个很好
介绍 使用许多小得JS、CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很
代码:http://pan.baidu.com/s/16fPka 效果一:   实现:(1)用before与after将前后的竖条生成
Android自带的加载旋转框样式太丑,或是我们有特殊的需求需要自定义加载进度条。 进度条核心类,本
jQuery 页面载入进度条 Shawn Published@17:40 / 2009-01-07 / Trackback / Skip 页面 Loading 条基
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号