今日在学习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. C# ICSharpCode.SharpZipLib

    C# ICSharpCode.SharpZipLib.dll文件压缩和解压功能类整理,上传文件或下载文件很常用 工作中我们很多时候需要进行对文件进行压缩,比较通用的压缩的dll就是ICSharpCod ...

  2. 后台自动启动appium

    首先说明,本人用的exe方式安装的appium. 新建一个.vbs文件,写入以下脚本,记得把D盘换成你自己的盘符. 1.后面taskkill好像没有实际作用..加就加了吧. Set ws = Crea ...

  3. order by使用方法

    1.ORDER BY 中关于NULL的处理 缺省处理,Oracle在Order by 时觉得null是最大值,所以假设是ASC升序则排在最后,DESC降序则排在最前. 当然,你也能够使用nulls f ...

  4. tiny210——uboot移植Makefile文章分析

    这东西已经写,我们没有时间发布,如今,终于有时间稍微长送记录汇总uboot学习过程.具体了.以后忘了也能够再温习回来嘛有些特殊字符显示得乱掉了 Makefile追踪技巧: 技巧1:能够先从编译目标開始 ...

  5. iOS程序 # 启动过程

    [ App 应用 ] 中文名:缺省 外文名:default 拼音:quē shěng 释义:系统默认状态 全称:缺省状态 -------------- 1.程序启动顺序 1> main.m程序入 ...

  6. POJ 2187: Beauty Contest(旋转卡)

    id=2187">Beauty Contest Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 27218   ...

  7. 用了TextMate才知道什么叫神级Editor

    用了TextMate才知道什么叫神级Editor 一直用Eclipse作为开发Ruby和Java项目的IDE,但是太耗内存,再开个Firefox和虚拟机就可以直接将MBP弄残了..看到大家都对Mac下 ...

  8. CSS3 Media Queries 详细介绍与使用方法

    Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支持. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 到底什么是 ...

  9. c#分部类型详解

    一.先看代码来理解 代码一 class ClassA { void A(){;} void B(){;} } 代码二 partial class ClassA { void A(){;} } part ...

  10. OCP-1Z0-051-题目解析-第13题

    13. View the Exhibit and examine the structure of the PRODUCTS table. You need to generate a report ...