<!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异步加载遮罩层特效的更多相关文章

  1. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  2. Scrapy爬虫框架教程(四)-- 抓取AJAX异步加载网页

    欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction ...

  3. jQuery的AJax异步加载

    主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...

  4. ajax异步加载问题

    使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.

  5. Ajax 异步加载

    AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...

  6. 使用Ajax异步加载页面时,怎样调试该页面的Js

    前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...

  7. ajax异步加载回跳定位

    1)首先,问题是这样的:page1在一个滚动到页面底部加载更新的函数(功能),当页面滚动了第二页(或更多页)时,点击链接跳转到了其他页面(page2),在page2有返回按钮,当从page2返回pag ...

  8. C# Winform 实现自定义半透明loading加载遮罩层

    在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 usi ...

  9. AJAX异步加载

    AJAX含义: 即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX可以跨 ...

随机推荐

  1. Java IO详解(一)------字节输入输出流

    File 类的介绍:http://www.cnblogs.com/ysocean/p/6851878.html Java IO 流的分类介绍:http://www.cnblogs.com/ysocea ...

  2. Linux与堆栈概念

    在学习C/C++编程的时候,老师都会反复灌输一些概念.比如程序内变量在堆栈上的分配,栈是由高地址到低地址,堆是由低地址到高地址等等,然后画出这样一幅经典概念图: 图片来自:http://blog.cs ...

  3. B507实验室打印机连接方法

    一.准备工具 实验室打印机内网IP地址:172.16.135.41 ,这个地址要看具体的打印机地址(可能会更换). 从实验室QQ群(土匪窝)上下载打印机驱动,如下图所示. 3. 非常重要的事情:请链接 ...

  4. Quartz.net 定时任务之简单任务

    一.概述 1.quartz.net 是一款从java quartz 上延伸出来的定时任务框架. 2.我在网上看到很多大神写过关于quartz.net 的博客.文章等,在这些博客文章里也学会了很多关于q ...

  5. EntityFramework6.X 之LocalDB&ConnectionString

    LocalDB 面向开发人员的SQL Server Express的执行模式,它的安装将复制启动SQL Server数据库引擎所需的最少文件集且使用特定连接字符串来启动连接,它是可以创建和打开SQL ...

  6. CPU最核心的电子元件叫做石英晶振

    CPU是电子计算机的主要设备之一,是电脑中的核心配件.主要功能是解释计算机指令以及处理计算机软件中的数据.有人会问,你知道CPU里面都有什么吗?我想大家都会说硅晶体,集成度极大的半导体材料.却没有人提 ...

  7. Amazing ASP.NET Core 2.0

    前言 ASP.NET Core 的变化和发展速度是飞快的,当你发现你还没有掌握 ASP.NET Core 1.0 的时候, 2.0 已经快要发布了,目前 2.0 处于 Preview 1 版本,意味着 ...

  8. js—浅谈方法和思路的重要性(首篇求大佬支持)

    js-浅谈方法和思路的重要性 学了这么久的js,我从老师的,同学的代码中发现,老师写的代码比我们的要清楚的很多,基本上没有太多累赘啊,能少的没有少啊等等..... 废话不多说,下面我们来看看这个我的一 ...

  9. 自己动手实现html去标签和文本提取

    随意观看 [TOC] 工具 python3.6 正则表达式(别的语言思路一样,容易借鉴) python正则表达式:flags的应用 这里主要介绍一下re.compile(pattern[, flags ...

  10. OOP中this指向详解

    谁调用了函数,this就指向谁 >>> this指向的永远只可能是对象!!! >>> this指向谁,永远不取决于this写在哪,而是取决于函数在哪调用!!! &g ...