js loading加载效果实现代码


Posted in Javascript onNovember 24, 2009
protected void Page_Load(object sender, EventArgs e) 
{ 
ShowLoading(); 
System.Threading.Thread.Sleep(10000); 
ClientScript.RegisterClientScriptBlock(typeof(string), "", "<script>document.body.onload=function(){removeLoadMsg();}</script>"); 
} /// <summary> 
/// 显示页面正在加载中效果 
/// </summary> 
public void ShowLoading() 
{ 
StringBuilder s = new StringBuilder(); 
s.Append(" <script language=JavaScript type=text/javascript>\n"); 
s.Append(" var t_id = setInterval(animate,20);\n"); 
s.Append(" var pos=0;var dir=2;var len=0;\n"); 
s.Append(" function animate(){\n"); 
s.Append(" var elem = document.getElementById('progress');\n"); 
s.Append(" if(elem != null) {\n"); 
s.Append(" if (pos==0) len += dir;\n"); 
s.Append(" if (len>32 || pos>79) pos += dir;\n"); 
s.Append(" if (pos>79) len -= dir;\n"); 
s.Append(" if (pos>79 && len==0) pos=0;\n"); 
s.Append(" elem.style.left = pos;\n"); 
s.Append(" elem.style.width = len;\n"); 
s.Append(" }}\n"); 
s.Append(" function removeLoadMsg() {\n"); 
s.Append(" this.clearInterval(t_id);\n"); 
s.Append(" var targelem = document.getElementById('loader_container');\n"); 
s.Append(" targelem.style.display='none';\n"); 
s.Append(" targelem.style.visibility='hidden';\n"); 
s.Append(" }\n "); 
s.Append("</script>\n"); 
s.Append("<style>"); 
s.Append("#loader_container {text-align:center; position:absolute; top:40%; width:100%; left: 0;}\n"); 
s.Append("#loader {font-family:Tahoma, Helvetica, sans; font-size:11.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:9999;}\n"); 
s.Append("#progress {height:5px; font-size:1px; width:1px; position:relative; top:1px; left:0px; background-color:#8894a8;}\n"); 
s.Append("#loader_bg {background-color:#e4e7eb; position:relative; top:8px; left:8px; height:7px; width:113px; font-size:1px;}\n"); 
s.Append("</style>\n"); 
s.Append("<div id=loader_container>\n"); 
s.Append("<div id=loader>\n"); 
s.Append("<div align=center>页面正在加载中...</div>\n"); 
s.Append("<div id=loader_bg><div id=progress> </div></div>\n"); 
s.Append("</div></div>\n "); 
//HttpContext.Current.Response.Write(s.ToString()); 
HttpContext.Current.Response.Write(s.ToString()); 
//HttpContext.Current.Response.Flush();
Javascript 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
JS解密入门之凭直觉解
Jun 25 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
webpack打包js的方法
Mar 12 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
jquery.ui.draggable中文文档
Nov 24 #Javascript
JS 实现双色表格实现代码
Nov 24 #Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 #Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 #Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 #Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 #Javascript
js cookies实现简单统计访问次数
Nov 24 #Javascript
You might like
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
Symfony核心类概述
2016/03/17 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python3并发写文件与Python对比
2019/11/20 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
参观监狱心得体会
2014/01/02 职场文书
党员批评与自我批评
2014/02/12 职场文书
迟到检讨书300字
2014/02/14 职场文书
文秘应届生求职信
2014/07/05 职场文书
个人四风对照检查材料
2014/09/26 职场文书
新闻通讯稿范文
2015/07/22 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python