js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div
预期效果：
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的更多相关文章
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失
一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...
- 页面加载完之前显示Loading
1.第一种方式 HTML <body class="is-loading"> <div class="curtain"> <div ...
- Html 页面载入内容前，显示 loading 效果。
Html 内容 loading部分: <div id="sys-loading" class=""><div class="spin ...
- [JS] 页面回车键提交表单-常用于登录页面
//判断是否按下了回车键 var EnterSubmit = function(evt){ evt= window.event || evt; if (evt.keyCode == 13){ //若按 ...
- js 封装的自动创建表格的相关操作
因为要做一个动态输入的表格,现在积累一下资料,在网上找了一些资料,经过总结是使用更加方便些,谁有更好的插件和封装的东西,请大家分享一下. <script type="text/java ...
- vue+springboot后台实现页面按钮权限
思路 1.用户跟角色关联 2.角色跟菜单关联 3.菜单跟菜单下的按钮关联 4.后端返回每个菜单下的按钮,前端通过自定义事件,在每个按钮上加上相应的事件 打字麻烦,还是看图吧! 建立btn.js 然后在 ...
- 图片未完成加载显示loading
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作
ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...
随机推荐
- undefined reference to `clock_gettime
下面这个错误通常是因为链接选项里漏了-lrt,但有时发现即使加了-lrt仍出现这个问题,使用nm命令一直,会发现-lrt最终指向的文件没有包含任何symbol,这个时候,可以找相应的静态库版本libr ...
- springmvc和js前端的数据传递和接收方式
在springmvc中controller的结果集可通过json格式传到js前端接受,也可以通过Map传给前端,具体实现如下 1,通过json格式传递 controller层实现如下 @Request ...
- 删除iCloud手机备份
问题描述 系统9.3.5提示iCloud空间即将满,遂清理一下,发现空间主要被备份文件占用,于是想着删除备份文件,但是手机中的清理iCloud列表中并未找到相关备份文件.最终通过Mac电脑中的iClo ...
- Java50道经典习题-程序35 最大最小交换
题目:输入数组,最大的与第一个元素交换,最小的与最后一个元素交换,输出数组.分析: 例如输入6 4 8 3 9 7 交换后输出9 4 8 7 6 3 import java.util.Arrays; ...
- android报错：org.ksoap2.SoapFault cannot be cast to org.ksoap2.serialization.SoapObject
今天在写一个webservice时一直报错,报Caused by: java.lang.ClassCastException: org.ksoap2.SoapFault cannot be cast ...
- Linux计划任务 定时任务 Crond 配置详解 crond计划任务调试 sh -x 详解 JAVA脚本环境变量定义
一.Crond 是什么?(概述) crontab 是一款linux系统中的定时任务软件用于实现无人值守或后台定期执行及循环执行任务的脚本程序,在企业中使用的非常广泛. 现在开始学习linux计 ...
- 大众点评CAT开源监控系统剖析
参考文档: 大众点评的实时监控系统分析(一) CAT_source_analyze 透过CAT,来看分布式实时监控系统的设计与实现 深度剖析开源分布式监控CAT [分布式监控CAT] Client端源 ...
- 洛谷P4074 [WC2013]糖果公园（莫队）
传送门 总算会树形莫队了…… 上次听说树形莫队是给树分块,实在看不懂.然后用括号序列的方法做总算能弄明白了 先说一下什么是括号序列,就是在$dfs$的时候,进入的时候记录一下,出去的时候也记录一下 拿 ...
- 无侵入进行SDK的初始化
话不多说,下面开始,nagios具体的介绍,可以搜一下,这篇文章为作者在实际操作中整理出来,写出来的都是负责人的内容~ 环境准备 此文档共用2台服务器的配置,操作系统均为centOS6.7,安装用户都 ...
- 记一次IIS应用程序域崩溃的原因
在日常工作中,每次新的功能上线前,我们会搭建一个测试环境提供给客户测试使用,确定无误后才会更新到正式环境上.这一次也不例外,在约定好时间地点,客户进行集中化测试的过程中,反应网站系统打不开,报500错 ...