预期效果：

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. 《Maven实战》笔记-2-坐标和依赖

    一.依赖范围 Maven在编译项目主代码的时候,需要使用一套classpath——编译classpath: 在编译和执行测试的时候,使用另一套classpath——测试classpath: 实际运行M ...

  2. Java 深入变量和封装思想小结

    1.变量的分类和初始值 成员变量:有初始值 局部变量:没有初始值 2.类字段 static :存在于方法区里面 实例变量(实例字段):存在于堆里面 局部变量:存在于栈里面 方法的覆盖: 子类覆盖父类: ...

  3. Java多线程并发学习-进阶大纲

    1.synchronized 的实现原理以及锁优化? 2.volatile 的实现原理? 3.Java 的信号灯? 4.synchronized 在静态方法和普通方法的区别? 5.怎么实现所有线程在等 ...

  4. MATLAB数字图像处理（一）基础操作和傅立叶变换

    数字图像处理是一门集计算机科学.光学.数学.物理学等多学科的综合科学.随着计算机科学的发展,数字图像处理技术取得了巨大的进展,呈现出强大的生命力,已经在多种领域取得了大量的应用,推动了社会的发展.其中 ...

  5. TigerVNC编译安装

    TigerVNC official site:http://www.linuxfromscratch.org/blfs/view/svn/xsoft/tigervnc.html TigerVNC版本: ...

  6. Kotlin 数据类型（字符类型）

    Kotlin有两种常见的字符类型. 第一种是String,第二种char. String String 的类型的赋值必须是用双引号的. 格式: var name="Arm830" ...

  7. 自定义等高 Cell

    1.介绍 1.1 代码自定义 cell(使用 frame) 创建一个继承自 UITableViewCell 的子类,比如 BookCell1. 在 initWithStyle:reuseIdentif ...

  8. ASPxGridView 下拉框不让输入

     DropDownStyle="DropDownList"该属性使combox控件不能手动输入数据,只能在下拉列表中选择

  9. Loadrunner 性能测试笔记

    性能测试脚本 // 关联token 放在请求返回前 web_reg_save_param("tokenId", "LB=,\"tokenId\":\& ...

  10. CF70D（动态凸包）

    CF70D(动态凸包) 给出q(<=1e5)个询问,每次在加上一个点,维护凸包,或者询问某个点是否在凸包内(在边上也算). 听说可以用cdq做--但是并不会.我等蒟蒻只会用平衡树做. 首先,假设 ...