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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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
用PHP和MySQL保存和输出图片
2006/10/09 PHP
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP 函数语法介绍一
2009/06/14 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
php基本函数汇总
2015/07/09 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
javascript重写alert方法的实例代码
2013/03/29 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
门店业绩提升方案
2014/06/08 职场文书
合作协议书模板2014
2014/09/26 职场文书
对照检查剖析材料
2014/09/30 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
疾病证明书
2015/06/19 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server