预期效果：

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. java全栈day03--循环高级

    今日主要内容介绍1.引用类型变量的创建及使用2.流程控制语句之选择语句3.流程控制语句之循环语句4.循环高级01创建引用类型变量公式 * A: 创建引用类型变量公式 * a: 我们要学的Scanner ...

  2. git仓库迁移的解决方案

    一.问题 在github中遇到感兴趣的项目,直接克隆下来,随着兴趣越来越浓,在本地做了些修改,后来干脆想fork到自己的github仓库,又要把本地的修改提交到fork后的自己的github仓库中.这 ...

  3. Business Trip to Taian

    工作必备 电脑.电源(下载好小助手.VPN.个人证书) 手机.充电器 重要参考书籍 生活用品 衣服,夏天体恤为主,别忘了加件外套 被罩.床单和枕巾 牙刷牙膏肥皂之类的必带,中号浴巾一条 拖鞋要不要? ...

  4. url-pattern 的设置与匹配

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

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

  6. Github加载慢，显示不完整问题解决

    问题: 在访问Github网站的时候,可能会遇到网站响应超时,图片加载不出,排版错误等情况(大部分情况下是可以正常打开的). 解决方法: 修改 C:\Windows\System32\drivers\ ...

  7. CENTOS 7 和 JDK 添加中文字体

    写在前面的话 当运维总是遇到各种奇奇怪怪的问题,比如新的 JAVA 项目上线,login 界面有个验证码,结果部署后发现,要么显示的奇奇怪怪,要么压根不显示. 或者在使用一些开源的 JAVA 项目的时 ...

  8. Python翻译器

    import urllib.request import urllib.parse import json content='有了我,翻译再也不是问题啦' print(content) while c ...

  9. STL用法

    map.find(key) 获取map容器中指定键值x的元素,如果找到,返回此元素的迭代器,否则返回map::end()的迭代器(即查找到容器的末尾都没有找到此元素).

  10. zabbix告警

    邮件告警分为两大步: 第一步:配置(配置又分为三小步) 发送邮件的用户 创建用户(添加上告警媒介) 给用户添加权限(在所有组里添加) 最后显示有读写权限才算成功!!! 告警媒介类型 创建媒介类型!一般 ...