今日在学习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. Nagios显示器MySQL一个错误:NRPE: Unable to read output具体的解决过程

    前言:nagios介面.见监测mysql服务错误,如下面: Warning:NRPE: Unable to read output 1,跟nagios显示器server上check下 1.1.运行ch ...

  2. I Love This Game 2115(结构体)

    Problem Description Do you like playing basketball ? If you are , you may know the NBA Skills Challe ...

  3. hdu1107武术(模拟题)

    Problem Description 在一个12行12方柱武侠世界,少林.武当峨眉武术弟子的三派,自相残杀主宰. 林世界的第一行的一列格子的坐标是(1, 1),第一行第二列坐标是(1, 2)--右下 ...

  4. C#操作Xml:XSLT语法 在.net中使用XSLT转换xml文档示例

    XSL即可扩展的样式表文件. 可以格式化xml的显示,也可以将xml转换成需要的另一种格式. 学习XSL必须熟悉XPath.XSL和XPath一样简单强大,容易学习. 1. XSL既然可以格式化xml ...

  5. ArcGIS网络分析之Silverlight客户端最近设施点分析(四)

    原文:ArcGIS网络分析之Silverlight客户端最近设施点分析(四) 在上一篇中说了如何实现最近路径分析,本篇将讨论如何实现最近设施点分析. 最近设施点分析实际上和路径分析有些相识,实现的过程 ...

  6. 随想录(从apple的swift语言说起)

    [ 声明:版权全部,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 喜欢apple的程序猿朋友对wwdc肯定不会陌生.本次wwdc上最大的一个亮点之中的一个就是s ...

  7. 突破IP限制动态替换代理ip。

    须要导入的两个jar包 实现的javabean <span style="font-size:18px;">package com.jx.po; public clas ...

  8. 认识bash这个shell

    我们通过shell将我们输入的命令与内核通信,好让内核可以控制硬件来正确无误地工作bash是我们Linux默认的shell 用户界面(Shell,application)--------核心(Kern ...

  9. C#操作 Advantage Database Server 数据库

    相关下载 http://devzone.advantagedatabase.com/dz/content.aspx?key=31 1.安装数据库: Advantage Database Server ...

  10. vistual studio 2012 安装失败,提示Microsoft Vistual Studio 2012 Devenv找不到元素,等错误信息

    在安装vistual studio 2012过程中,出现安装失败,提示Microsoft Vistual Studio 2012 Devenv找不到元素,等错误信息 解决方法是更新相应的server补 ...