预期效果：

1、点击Save按钮，创建及显示loading div框

2、Save操作完成后，再删除loading 及弹出提示结果

<html>

<head>

</head>

<body>

    <input type="button" value="Save" name="btnSave" />

</body>

</html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

function loadingShow(){

    var loadingContainer = $("div.loading");

    if (loadingContainer.length <= 0) {

        loadingContainer = $("<div>", { Class: "loadingWhenSave" , id:"loadingWhenSave" });

        var img = $("<img>", { src: "loading.gif" });

        loadingContainer.html("");

        loadingContainer.append(img).css({

            position: "absolute", //"absolute",

            zIndex: "9999",

            textAlign: "center",

            backgroundColor: "#000",

            border: "solid 4px red",

            paddingTop: "18px",

            fontSize: "14px",

            top: "30%",

            left: "40%",

            height: "300px",

            width: "400px"

        });

        //document.body.appendChild(loadingContainer);

        loadingContainer.appendTo('body');

    }

    //$(loadingContainer).show();

}

function loadingHide(){

    $("#loadingWhenSave").remove();

}

function saveFinished(){

    //loadingHide();

    alert("save success.");

}

$(document).ready(function(){

    $(btnSave).click(function(){

        loadingShow();

        setTimeout("saveFinished()",2000);

    });

});

</script>

js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div的更多相关文章

  1. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  2. css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

  3. 页面加载完之前显示Loading

    1.第一种方式 HTML <body class="is-loading"> <div class="curtain"> <div ...

  4. Html 页面载入内容前，显示 loading 效果。

    Html 内容 loading部分: <div id="sys-loading" class=""><div class="spin ...

  5. [JS] 页面回车键提交表单-常用于登录页面

    //判断是否按下了回车键 var EnterSubmit = function(evt){ evt= window.event || evt; if (evt.keyCode == 13){ //若按 ...

  6. js　封装的自动创建表格的相关操作

    因为要做一个动态输入的表格,现在积累一下资料,在网上找了一些资料,经过总结是使用更加方便些,谁有更好的插件和封装的东西,请大家分享一下. <script type="text/java ...

  7. vue+springboot后台实现页面按钮权限

    思路 1.用户跟角色关联 2.角色跟菜单关联 3.菜单跟菜单下的按钮关联 4.后端返回每个菜单下的按钮,前端通过自定义事件,在每个按钮上加上相应的事件 打字麻烦,还是看图吧! 建立btn.js 然后在 ...

  8. 图片未完成加载显示loading

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  9. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

随机推荐

  1. （树）判断二叉树是否为BST

    题目:判断一颗二叉树是否为BST. 思路:其实这个问题可以有多个解决方法. 方法一:递归解决.根据BST的特性.左边的小于根节点的值,右边的大于根节点的值.并且对于每一棵子树都是如此.所以我们可以直接 ...

  2. Java50道经典习题-程序49 子串出现的个数

    题目:计算首末不含空格各个子串之间只含一个空格的字符串中子串出现的次数分析:例如输入的字符串为"I come from County DingYuan Province AnHui.&quo ...

  3. MongoDB 分片1

    第一步: 准备数据节点 必须添加–shardsvr参数. mongod--port32770--shardsvr--dbpathD:\db\mongodata\shard\mongodb1--logp ...

  4. Linux计划任务 定时任务 Crond 配置详解 crond计划任务调试 sh -x 详解 JAVA脚本环境变量定义

    一.Crond 是什么?(概述) crontab 是一款linux系统中的定时任务软件用于实现无人值守或后台定期执行及循环执行任务的脚本程序,在企业中使用的非常广泛.     现在开始学习linux计 ...

  5. 几款Web服务器性能压力测试工具

    一.http_load 程序非常小,解压后也不到100K http_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载. 但是它不同于大多数压力测试工具,它可以以一个单一的进程运行,一般 ...

  6. Http工作原理（转）

    HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.它可以使浏览器更加高效,使网络传输减少.它不仅保证计算机正确 ...

  7. 小程序开发笔记【二】，抽奖结果json数据拼装bug解决

    抽奖结果数据json格式数据拼接bug,如下图,只发布了两个奖项,每个奖项设置2个奖品,但最后拼接数据的时候出现3个奖项 json数据格式如下 "luckyResult":[ { ...

  8. EXTJs前后台交互 常用哦3种方式

    <1>Ajax交互方式 Ext.Ajax.request( { //被用来向服务器发起请求默认的url url : "", //请求时发送后台的参数,既可以是Json对 ...

  9. SQL Server 附加数据库 错误5210

    前言 那天在弄机房的时候,附加数据库总是附加不上,然而将附加数据库文件放到优盘里,就可以附加成功.我也不知道为什么了,但是这次还是别将就了.于是乎,上网查了查原来是权限不够啊.这可怎么办,见下面三种方 ...

  10. MongoDB3.2(C#版) CRUD

    Retrieve(检索.查询): 分两种(一种是插入对象没有自定义; 第二种就是自定义插入对象) 这两种情况下的区别就是插入数据库中的文档类型不一样,一个是BsonDocument,一个是自定义对象( ...