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可以跨 ...

随机推荐

RabbitMQ学习-1补充
1.如果尝试声明一个已经存在的队列会发生什么? 只要参数完全匹配现存的队列的话,Rabbit什么也不做,并返回成功,就好像这个队列已经创建成功. 2.如何检测队列是否存在? 在创建队列的时候设置que ...
on方法使用注意事项
on(eventType,[childSelector],[data],fn) 采用事件委托机制绑定事件,好处是子元素动态加入时无需再次绑定. on方法可以传入childSelector指定添加事件处 ...
python 计算两个日期相差多少个月
近期,由于业务需要计算两个日期之前相差多少个月.我在网上找了很久,结果发现万能的python,居然没有一个模块计算两个日期的月数,像Java.C#之类的高级语言,都会有(date1-date2).mo ...
029 hibernate抓取策略
实例A引用实例B,B如果是代理的话(比如多对一关联中):如果遍历A的查询结果集(假设有10条记录),在遍历A的时候,访问B变量,将会导致n次查询语句的发出!这个时候,如果在B一端的class上配置ba ...
开涛spring3(7.3) - 对JDBC的支持之 7.3 关系数据库操作对象化
7.3.1 概述所谓关系数据库对象化其实就是用面向对象方式表示关系数据库操作,从而可以复用. Spring JDBC框架将数据库操作封装为一个RdbmsOperation,该对象是线程安全的.可复 ...
开涛spring3(5.3) - Spring表达式语言之 5.3 SpEL语法
5.3 SpEL语法 5.3.1 基本表达式一.字面量表达式: SpEL支持的字面量包括:字符串.数字类型(int.long.float.double).布尔类型.null类型. 类型示例字 ...
es6之Generator
1.Generator函数其实是一个封装了多个内部状态的状态机,执行它会返回一个遍历器对象,然后可以依次遍历Generator中的每一个状态,也就是分段执行,yield是暂停执行的标记,next恢复执 ...
R + ggplot2 Graph Catalog（转）
Joanna Zhao’s and Jenny Bryan’s R graph catalog is meant to be a complement to the physical book,Cre ...
IE 不兼容 js indexOf 函数
在使用 js 判断数组中是否存储该元素,我们会用到 indexOf 函数.而在 IE 上 indexOf 函数无法兼容,通过以下方法解决,仅以文章记录一下 if (!Array.prototyp ...
特朗普退出《巴黎协定》：python词云图舆情分析
1 前言 2017年6月1日,美国特朗普总统正式宣布美国退出<巴黎协定>.宣布退出<巴黎协定>后,特朗普似乎成了“全球公敌”. 特斯拉总裁马斯克宣布退出总统顾问团队迪士尼董事 ...

ajax异步加载遮罩层特效

ajax异步加载遮罩层特效的更多相关文章

随机推荐

热门专题