预期效果：

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. break跳出多重循环

    大家都知道break只能跳出当前的一个循环语句,如果碰到要跳出多个循环体,那么我们就该在循环体开头设置一个标志位,然后使用带此标志位的break语句跳出多重循环 jump: ;i<;i++){ ...

  2. [译]在Javascript中将string转化成numbers

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  3. [转]Oracle截取字符串相关函数

    转至:http://www.cnblogs.com/qmfsun/p/4493918.html 1.instr(sourceString,destString,start,appearPosition ...

  4. Bugly升级应用集成指南

    1.配置 app/build.gradle android { defaultConfig { ndk { //设置支持的SO库架构 abiFilters 'armeabi' //, 'x86', ' ...

  5. chrome安装postman插件

    参考http://www.cnplugins.com/zhuanti/how-to-make-crx-install.html 下载地址:http://www.cnplugins.com/down/p ...

  6. Git配置代理命令

    针对***的代理配置 设置代理 git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.p ...

  7. 获取GridView控件总列数

    GridView控件,它不管是放在MasterPage母版页内,还是放在Page单独网页内,它不管是自动显示列AutoGenerateColumns="true",还是手动定列Au ...

  8. FPM包定制完成 (等待实现 里程碑 1 和 2) 2018年4月13日 2:18:32

    前期环境准备: 关闭SELINUX  :   setenforce 0 关闭SELINUX  :   sed -i 's#SELINUX=enforcing#SELINUX=disabled#g' / ...

  9. boostrap 进入条显示百分比

    <div class="progress"> <div class="progress-bar progress-bar-success"  ...

  10. 正经学C#_运算符优先级：[c#入门经典]

    学了那么多的运算符,终于差不多结束了,现在要说一下  总体的优先级别 高到低的顺序 类别  运算符  结合性  前缀 ++,--,(),+,-,!,~ 从左到右  乘除  * / %  从左到右  加 ...