今日在学习JavaScript所有写个通用的进度条,防止网页假死。让用户更清楚地知道此网页正在进行加载或者处理一些事情,所有加载进度条是一个网站的必要性。

在网页中Page_load首先要加载此进度条,如果处理完之后再进行关闭

protected void Page_Load(object sender, EventArgs e)
{
initJavascript();
}

//加载进度条的实体方法

public static void initJavascript()
{
HttpContext.Current.Response.Write(" <script language=JavaScript type=text/javascript>");
HttpContext.Current.Response.Write("var t_id = setInterval(animate,20);");
HttpContext.Current.Response.Write("var pos=0;var dir=2;var len=0;");
HttpContext.Current.Response.Write("function animate(){");
HttpContext.Current.Response.Write("var elem = document.getElementById('progress');");
HttpContext.Current.Response.Write("if(elem != null) {");
HttpContext.Current.Response.Write("if (pos==0) len += dir;");
HttpContext.Current.Response.Write("if (len>32 || pos>79) pos += dir;");
HttpContext.Current.Response.Write("if (pos>79) len -= dir;");
HttpContext.Current.Response.Write(" if (pos>79 && len==0) pos=0;");
HttpContext.Current.Response.Write("elem.style.left = pos;");
HttpContext.Current.Response.Write("elem.style.width = len;");
HttpContext.Current.Response.Write("}}");
//隐藏loading
HttpContext.Current.Response.Write("function remove_loading() {");
HttpContext.Current.Response.Write(" this.clearInterval(t_id);");
HttpContext.Current.Response.Write("var targelem = document.getElementById('loader_container');");
HttpContext.Current.Response.Write("targelem.style.display='none';");
HttpContext.Current.Response.Write("targelem.style.visibility='hidden';");
HttpContext.Current.Response.Write("}");
HttpContext.Current.Response.Write("</script>");
////描绘loading样式
HttpContext.Current.Response.Write("<style>");
HttpContext.Current.Response.Write("#loader_container {text-align:center; position:absolute; top:30%; width:100%; left: 0;}");
HttpContext.Current.Response.Write("#loader {font-family:Tahoma, Helvetica, sans; font-size:15.5px; color:#000000; background-color:#FFFFFF; padding:10px 0 16px 0; margin:0 auto; display:block; width:130px; border:1px solid #5a667b; text-align:left; z-index:2;}");

HttpContext.Current.Response.Write("</style>");
//显示在页面上的loading
HttpContext.Current.Response.Write("<div id=loader_container>");
HttpContext.Current.Response.Write("<div id=loader>");

HttpContext.Current.Response.Write("<div align=center><a><img src="+"loading.gif"+"/></a></div>");

HttpContext.Current.Response.Write("</div></div>");
//缓冲页面上的输出
HttpContext.Current.Response.Flush();
}

//关闭进度条的实体方法实际上是进行DIV图层的隐藏

public static void UnloadJavascript()
{
HttpContext.Current.Response.Write(" <script language=JavaScript type=text/javascript>");
HttpContext.Current.Response.Write("remove_loading();");
HttpContext.Current.Response.Write(" </script>");
}

ASP添加进度条的更多相关文章

  1. QTableView 添加进度条

    记录一下QTableView添加进度条 例子很小,仅供学习 使用QItemDelegate做的实现 有自动更新进度 要在.pro文件里添加 CONFIG += c++ ProgressBarDeleg ...

  2. struts2上传文件添加进度条

    给文件上传添加进度条,整了两天终于成功了. 想要添加一个上传的进度条,通过分析,应该是需要不断的去访问服务器,询问上传文件的大小.通过已上传文件的大小, 和上传文件的总长度来评估上传的进度. 实现监听 ...

  3. EasyUI添加进度条

    EasyUI添加进度条 添加进度条重点只有一个,如何合理安排进度刷新与异步调用逻辑,假如我们在javascript代码中通过ajax或者第三方框架dwr等对远程服务进行异步调用,实现进度条就需要做到以 ...

  4. c#devexpress GridContorl添加进度条

    demo 的实现图 下边是步骤和代码 1定义 时钟事件,定时的增加进度条的增量. 2:  添加进度条 3;定义字段属性 using System; using System.Collections.G ...

  5. iOS WKWebView添加进度条02

    之前写了一个是关于webview添加进度条的,现在补一个WKWebView进度条. //添加一个全局属性 @property(nonatomic,strong)CALayer *progresslay ...

  6. iOS-仿支付宝加载web网页添加进度条

    代码地址如下:http://www.demodashi.com/demo/11727.html 目前市场上APP常会嵌入不少的h5页面,参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条. ...

  7. WebView的使用及添加进度条

    实现的效果比较简单类似于微信打开网页,头部有个进度条显示加载进度 下载地址:http://download.csdn.net/detail/qq_29774291/9666941 1.在安卓端加载一个 ...

  8. JDK一键部署, 新添加进度条

    JDK部署, 脚本与JDK安装包放在同一目录 然后执行 source ./jdk.sh 稍等进度条100%即可 #******************************************* ...

  9. pandas apply 添加进度条

    Way:from tqdm import tqdmimport pandas as pdtqdm.pandas(desc='pandas bar')df['title_content'] = df.p ...

随机推荐

  1. .NET系统开发过程中积累的扩展方法

    分享.NET系统开发过程中积累的扩展方法   .NET 3.5提供的扩展方法特性,可以在不修改原类型代码的情况下扩展它的功能.下面分享的这些扩展方法大部分来自于Code Project或是Stacko ...

  2. thinkphp学习笔记1—目录结构和命名规则

    原文:thinkphp学习笔记1-目录结构和命名规则 最近开始学习thinkphp,在下不才,很多的问题看不明白所以想拿出来,恕我大胆发在首页上,希望看到的人能为我答疑解惑,这样大家有个互动,学起来快 ...

  3. 大数据系列修炼-Scala课程03

    前言 今天上班看了很多关于前端js,jQuery.bootstrap.js以及springMVC看得迷迷糊糊的,毕竟以前很少去学习前端的技术,所有看得有点困,还好看得比较多,回家后也开始学习关于Sca ...

  4. (转).net webconfig使用IConfigurationSectionHandler自定section

    自定义配置结构 (使用IConfigurationSectionHandler) 假设有以下的配置信息,其在MyInfo可以重复许多次,那么应如何读取配置呢?这时就要使用自定义的配置程序了.<m ...

  5. 手机新闻网站,手持移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发

    我们坐在地铁.经常拿出新浪手机查看新闻.腾讯新闻,或者看新闻,等刷微信功能.你有没有想过如何实现这些目标. 移动互联网.更活泼. 由于HTML5未来,jQuery Moblie未来. 今天我用jqm的 ...

  6. MVC6项目

    解读ASP.NET 5 & MVC6系列(2):初识项目 2015-05-14 09:08 by 汤姆大叔, 2866 阅读, 19 评论, 收藏, 编辑 初识项目 打开VS2015,创建We ...

  7. oracle_查询Oracle正在执行和执行过的SQL语句

    ---正在执行的select a.username, a.sid,b.SQL_TEXT, b.SQL_FULLTEXT  from v$session a, v$sqlarea b where a.s ...

  8. linux_apt-get 使用详解

    安装应用从互联网上下载查询时 用到,今天安装个 mysql 简化流程如下: apt-cache search mysql-server sudo apt-get install mysql-serve ...

  9. duplicate symbol _*** in:

    duplicate symbol _kReachabilityChangedNotification in: 问题出在同一个文件被引用两次,在项目中找到引用的地方,删掉对应的引用

  10. iOS8开发~UI布局(二)storyboard中autolayout和size class的使用具体解释

    一.概要:前一篇初步的描写叙述了size class的概念,那么实际中怎样使用呢,以下两个问题是我们一定会遇到的: 1.Xcode6中添加了size class,在storyboard中怎样使用? 2 ...