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 相关文章推荐
jquery获得下拉框值的代码
Aug 13 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
js实现目录定位正文示例
Nov 14 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
vue组件是如何解析及渲染的?
Jan 13 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP学习 变量使用总结
2011/03/24 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
详解php协程知识点
2018/09/21 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
js确定对象类型方法
2012/03/30 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Python中作用域的深入讲解
2018/12/10 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
学生会个人自荐书范文
2014/02/12 职场文书
网页美工求职信范文
2014/04/17 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
员工安全生产责任书
2014/07/22 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
护士求职自荐信范文
2015/03/04 职场文书
狂人日记读书笔记
2015/06/30 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
品德与社会教学反思
2016/02/24 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers