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可以跨 ...
随机推荐
- 微信小程序开发流程
2017年1月9日,张小龙在2017微信公开课Pro上发布的小程序正式上线,一夜之间,小程序可谓家喻户晓,但通过接下来的几个月的观察,微信小程序并没有想象中的那么火爆.进入4月以来,微信小程序团队进行 ...
- jquery之属性操作
jQuery之属性操作 相信属性这个词对大家都不陌生.今天我就给大家简单地介绍一下JQuery一些属性的操作 属性一共分三大类 一.基本属性 1.attr 2.removeAttr 3.prop 4. ...
- 也许是目前实现最好的js模拟滚动插件
finger-mover 是一个集成 Fingerd(移动端以手指为单位的事件管理方案) 和 Moved(微型运动方案) 为一体的移动端动效平台,finger-mover 本身并不能为你做什么,但是附 ...
- ASP.NET Core 菜鸟之路：从Startup.cs说起
1.前言 本文主要是以Visual Studio 2017 默认的 WebApi 模板作为基架,基于Asp .Net Core 1.0,本文面向的是初学者,如果你有 ASP.NET Core 相关实践 ...
- three.js粒子效果（分别基于CPU&GPU实现）
前段时间做了一个基于CPU和GPU对比的粒子效果丢在学习WebGL的群里,技术上没有多作讲解,有同学反馈看不太懂GPU版本,干脆开一篇文章,重点讲解基于GPU开发的版本. 一.概况 废话不多说,先丢上 ...
- MyBatis源码解读（3）——MapperMethod
在前面两篇的MyBatis源码解读中,我们一路跟踪到了MapperProxy,知道了尽管是使用了动态代理技术使得我们能直接使用接口方法.为巩固加深动态代理,我们不妨再来回忆一遍何为动态代理. 我相信在 ...
- jt格式文件与网格压缩
jt格式文件与网格压缩 介绍 jt是一种3D数据格式,主要用于工业,产品可视化,数据交换,并且西门子在2012推动jt成为ISO国际标准.在文件尺寸方面,采用了不少专门的压缩方法,比较轻量化. jt文 ...
- User-Agent详解
User-Agent : 用户代理 用户在上网的时候会作为http 请求头的一部分传递给服务端 ,用于识别用户当前环境(如浏览器类型及版本号,以及操作系统信息 ) 右键f12可以查看 下面是我的浏 ...
- Hibernate中调用带有underscore的Column Name
Hibernate中默认的NamingStrategy不支持调用带有下划线的column name.在hibernate的bean中必须使用camel case.使用ImprovedNamingStr ...
- 局域网内部署 Docker Registry
在局域网内部署 Docker Registry 可以极大的提升平时 pull.push 镜像的速度,从而缩短自动化操作的过程.同时也可以缓解带宽不足的问题,真是一举多得.本文将从创建单机的 Docke ...