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 相关文章推荐
js模拟select下拉菜单控件的代码
May 08 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
详解vue v-model
Aug 31 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python制作Windows系统服务
2017/03/25 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
美国校服网上商店:French Toast
2019/10/08 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
四风存在的原因分析
2014/02/11 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
六查六看剖析材料
2014/02/15 职场文书
班委竞选演讲稿
2014/04/28 职场文书
社区春季防火方案
2014/06/02 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
廉洁自律证明
2015/06/24 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
MySQL分区以及建索引的方法总结
2022/04/13 MySQL