ajax异步加载遮罩层特效
<!doctype html> <html> <head> <title>遮罩层(正在加载中)</title> <meta charset="utf-8" /> <style> #cover{ display:none; position:fixed; z-index:1; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.44); } #coverShow{ display:none; position:fixed; z-index:2; top:50%; left:50%; border:1px solid #127386; width:300px; height:100px; margin-left:-150px; margin-top:-150px; background:#127386; } </style> <script> function coverit() { var cover = document.getElementById("cover"); var covershow = document.getElementById("coverShow"); cover.style.display = 'block'; covershow.style.display = 'block'; } function hidden_coverit() { var cover = document.getElementById("cover"); var covershow = document.getElementById("coverShow"); cover.style.display = 'none'; covershow.style.display = 'none'; } </script> </head> <body> <div id="cover"></div> <div id="coverShow"> <table align="center" border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse; height: 100px; min-height: 100px;" bgcolor="#127386"> <tr> <td height="30" style="font-size: 12px;">数据加载中,请稍后......</td> </tr> <tr> <td align="center" bgcolor="#ffffff"> <img src="./20141023034634293.gif" alt="" /> </td> </tr> </table> </div> <input type="button" value="遮住" onclick="coverit()"/> </body> <script type="text/javascript"> coverit();//开始加载遮罩层(正在加载中...) $.ajax( { url:'/StatisticsGame/OverallSituationDo', data:{ new_start_time:new_start_time,//开始时间 new_end_time:new_end_time,//结束时间 req_game:$("#select_game1").select().val(), get_select_platform:$('#select_platform').val(), req_mode:search_mode}, type:'post', cache:false, async:true, dataType:'json', success:function(data) { $(".asset_table_tr").remove(); $('.add_tpl_view').remove(); if(data["req"] == "success"){ hidden_coverit();//得到数据之后,关闭遮罩加载中... var total_new_count = 0; var total_new_incom_moneys=0; var total_new_draw_moneys=0; var total_get_incom_total_moneys=0; var total_get_draw_total_moneys=0; var total_total_assets_moneys=0; var total_login_count=0; for(i = 0; i < data["data"].length; ++i){ var date = data["data"][i]["new_time"];//日期 var get_select_platform = data["data"][i]["select_platform_name"];//平台名称 var login_count =Number(data["data"][i]["count"]);//登录用户数 var new_count =Number(data["data"][i]["new_count"]);//新用户数 var new_incom_moneys =Number(data["data"][i]["new_incom_money"]);//转入资金用户 var new_draw_moneys =Number(data["data"][i]["new_draw_money"]);//转出资金用户 var get_incom_total_moneys =Number(data["data"][i]["total_incom_money"]);//转入资金总额 var get_draw_total_moneys =Number(data["data"][i]["total_draw_money"]);//转出资金总额 var total_assets_moneys =Number(data["data"][i]["total_cash_momey"]);//KGAME余额 var text = '<tr class="asset_table_tr"><td>'+date + '</td>'; total_new_count += new_count; total_new_incom_moneys += new_incom_moneys; total_new_draw_moneys += new_draw_moneys; total_get_incom_total_moneys += get_incom_total_moneys; total_get_draw_total_moneys += get_draw_total_moneys; total_total_assets_moneys += total_assets_moneys; total_login_count+=login_count; text += '<td>'+ get_select_platform + '</td>'; text += '<td>'+ new_count +'</td>'; text += '<td>'+ login_count + '</td>'; text += '<td>'+ new_incom_moneys + '</td>'; text += '<td>'+ new_draw_moneys + '</td>'; text += '<td>'+ get_incom_total_moneys.toFixed(2) + '</td>'; text += '<td>'+ get_draw_total_moneys.toFixed(2) + '</td>'; text += '<td>'+ total_assets_moneys.toFixed(2) + '</td>'; text += '</tr>'; $("#asset_table").append(text); } var text1; var str='合计'; var str2='\'; text1 += '<tr class="add_tpl_view">'; text1 += '<td>'+ str + '</td>'; text1 += '<td>'+ str2 + '</td>'; text1 += '<td>'+ total_new_count + '</td>'; text1 += '<td>'+ total_login_count + '</td>'; text1 += '<td>'+ total_new_incom_moneys + '</td>'; text1 += '<td>'+ total_new_draw_moneys + '</td>'; text1 += '<td>'+ total_get_incom_total_moneys.toFixed(2) + '</td>'; text1 += '<td>'+ total_get_draw_total_moneys.toFixed(2) + '</td>'; text1 += '<td>'+ total_total_assets_moneys.toFixed(2) + '</td>'; text1 += '</tr>'; $("#asset_table").append(text1); }else{ var error_message=data['error_message']; alert(error_message); return false; } }, error : function() { } }); </script> </html>
ajax异步加载遮罩层特效的更多相关文章
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- Scrapy爬虫框架教程(四)-- 抓取AJAX异步加载网页
欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction ...
- jQuery的AJax异步加载
主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...
- ajax异步加载问题
使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.
- Ajax 异步加载
AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...
- 使用Ajax异步加载页面时,怎样调试该页面的Js
前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...
- ajax异步加载回跳定位
1)首先,问题是这样的:page1在一个滚动到页面底部加载更新的函数(功能),当页面滚动了第二页(或更多页)时,点击链接跳转到了其他页面(page2),在page2有返回按钮,当从page2返回pag ...
- C# Winform 实现自定义半透明loading加载遮罩层
在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 usi ...
- AJAX异步加载
AJAX含义: 即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX可以跨 ...
随机推荐
- java线程总结3--synchronized关键字,原理以及相关的锁
在多线程编程中,synchronized关键字非常常见,当我们需要进行"同步"操作时,我们很多时候需要该该关键字对代码块或者方法进行锁定.被synchronized锁定的代码块,只 ...
- linux -- 个人笔记
##转自别人的博客 一般直接用tar命令打包很简单,直接使用 tar -zcvf test.tar.gz test 即可. 在很多时候,我们要对某一个目录打包,而这个目录下有几十个子目录和子文件,我们 ...
- angular.js的表格指令
html div.col-sm-12 table.table.table-bordered.table-condensed.table-hover.table-striped.dataTable.no ...
- 开发一个Servlet示例
Servlet响应请求步骤: Servlet是一个基于Java技术的Web组件,运行在服务器端,用户利用Servlet可以很轻松地扩展Web服务器的功能,使其满足特定的应用需要.Tomcat是一个常用 ...
- 用app.net Core搞点多国语言网站
Asp.net Core 中文文档很少,你可以看英文的,不过英文的也是说的有点乱.这篇文章是干货. 1. 配置好你的WebApplication,使他可以支持国际化语言,修改文档Startup.cs ...
- Jmeter3.0新特性
2016-5-19昨日,Jmeter又更新了新版本. 那么新版本有哪些新特性呢? Changes This page details the changes made in the current ...
- Selenium 高阶应用之WebDriverWait 和 expected_conditions
Seleniium 是相当不错的一个第三方测试框架,可惜目前国内已经无法访问其官网(FQ可以). 不知道大家是否有认真查看过selenium 的api,我是有认真学习过的.selenium 的api中 ...
- Redis多实例及主从搭建
主从搭建前提是服务器上已经安装好了redis, redis安装可搜索本站另一篇博客:redis安装. redis单主机多实例 一.我们首先拷贝两份文件: cp /etc/redis.conf /etc ...
- arcgis sde 导出栅格文件失败,提示“Database user name and current user schema do not match ”.
具体错误/警告如下: 翻译一下:数据库用户名和当前用户数据库对象的集合不匹配 没有空间参考存在 数据库表没找到 主要还是第一句的问题. 解决方法:切换当前sde账户为能够写入sde的账户,这块不是很了 ...
- 设计模式二:MVC
先附上部分代码: /* *MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式.这种模式用于应用程序的分层开发. *Model(模型) - 模型代表一个存取数据的对 ...