js实现操作等待提示loading……

　　js实现操作等待功能，防止重复提交，界面友好，底部为灰色遮罩层，防止用户重复操作。

　　先看效果图：

　　接着看js代码：

 1 //关闭等待窗口
 2 function closeWaiting() {
 3     var bgDiv = document.getElementById("bgDiv");
 4     var msgDiv = document.getElementById("msgDiv");
 5     //移除背景遮罩层div
 6     if(bgDiv != null){
 7         document.body.removeChild(bgDiv);
 8     }
 9     //移除中间信息提示层div
10     if(msgDiv != null){
11         document.body.removeChild(msgDiv);
12     }
13 }
14 //显示等待窗口
15 function showWaiting() {
16     var msgw, msgh, bordercolor;
17     msgw = 300; //提示窗口的宽度
18     msgh = 100; //提示窗口的高度
19     bordercolor = "#336699"; //提示窗口的边框颜色
20     titlecolor = "#99CCFF"; //提示窗口的标题颜色
21
22     var sWidth, sHeight;
23     sWidth = document.body.clientWidth;
24     sHeight = document.body.clientHeight;
25
26     //背景遮罩层div
27     var bgObj = document.createElement("div");
28     bgObj.setAttribute('id', 'bgDiv');
29     bgObj.style.position = "absolute";
30     bgObj.style.top = "0px";
31     bgObj.style.background = "#888";
32     bgObj.style.filter = "progid:DXImageTransform
33         .Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
34     bgObj.style.opacity = "0.6";
35     bgObj.style.left = "0px";
36     bgObj.style.width = sWidth + "px";
37     bgObj.style.height = sHeight + "px";
38     document.body.appendChild(bgObj);
39
40     //信息提示层div
41     var msgObj = document.createElement("div");
42     msgObj.setAttribute("id", "msgDiv");
43     msgObj.setAttribute("align", "center");
44     msgObj.style.position = "absolute";
45     msgObj.style.background = "white";
46     msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
47     msgObj.style.border = "1px solid " + bordercolor;
48     msgObj.style.width = msgw + "px";
49     msgObj.style.height = msgh + "px";
50     msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px";
51     msgObj.style.left = (sWidth - msgw) / 2 + "px";
52     document.body.appendChild(msgObj);
53
54     //标题栏
55     var title = document.createElement("h4");
56     title.setAttribute("id", "msgTitle");
57     title.setAttribute("align", "left");
58     title.style.margin = "0px";
59     title.style.padding = "3px";
60     title.style.background = bordercolor;
61     title.style.filter = "progid:DXImageTransform.Microsoft
62         .Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
63     title.style.opacity = "0.75";
64     title.style.border = "1px solid " + bordercolor;
65     title.style.height = "14px";
66     title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
67     title.style.color = "white";
68     title.innerHTML = "正在加载中，请稍候......";
69     document.getElementById("msgDiv").appendChild(title);
70
71     //中间等待图标
72     var img = document.createElement("img");
73     img.style.margin = "10px 0px 10px 0px";
74     img.style.width = "48px";
75     img.style.height = "48px";
76     img.setAttribute("src", "../images/waiting.gif");
77     document.getElementById("msgDiv").appendChild(img);
78 }

　　点击操作按钮时的js方法如下：

 1 function submitForm(flag){
 2     switch(flag){
 3         case 1:
 4             //等待提示
 5             showWaiting();
 6             break;
 7         //do something else
 8     }
 9     document.forms[0].submit();
10 }

　　操作成功，跳转到正确页面后需要关闭等待提示，在结果页面调用closeWaiting();方法即可:

1 $(document).ready(parent.closeWaiting());

　　这是jQuery的写法，记得引入jQuery包。

　　至此所有功能完成，很简单的操作。

　　中间等待提示图片留这里吧

转载于:https://www.cnblogs.com/baifeilong/p/3768312.html

js实现操作等待提示loading……相关推荐

自定义JS加载等待动画loading
闲话少说,上代码:如下为加载数据时的等待css动画,效果如图:![这里写图片描述](https://img-blog.csdn.net/20180816112802275?watermark/2/te ...
js阻止鼠标右击_使用JS 禁止键盘快捷方式和禁止鼠标右键操作弹窗提示
很多开发人员或者企业都希望自己的源码不被别人看到或者攻击,于是就有了前端禁止右键禁止键盘快捷键,或者更改右键内容的需求.博智互联这里使用JS 禁止查看代码的键盘快捷方式和禁止鼠标右键操作弹窗提示.虽然 ...
JS/CSS 各种操作信息提示效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
使用Ajax同步请求增加页面等待提示
使用Ajax同步请求增加页面等待提示最近在做项目时,有一个需求是批量打印好多个合同,使用AJAX向后台传送数据,等待后台执行后,需要把生成之后的文件地址传送过来. 后台的处理时间比较长,根据合同的多 ...
js实现删除确认提示框
js实现删除确认提示框一.实例描述防止用户小心单击了"删除"按钮,在用户单击"删除"按钮后,给出一个提示,让用户确认此次操作是否正确. 二.效果三.代码 ...
python调用js文件报错_python - selenium 运行网页中js脚本报错,提示未定义
问题问题1 selenium 运行网易中js脚本报错提示未定义报错提示如下: driver.execute_script("javascript:amsInit(62800,30315 ...
在Node.js中操作文件系统(一)
在Node.js中操作文件系统在Node.js中,使用fs模块来实现所有有关文件及目录的创建,写入及删除操作.在fs模块中,所有对文件及目录的操作都可以使用同步与异步这两种方法.比如在执行读文件操作 ...
Qt 之等待提示框（QPropertyAnimation）
简述之前分享过QLabel可以通过QMovie播放gif图片,可以实现等待提示框,今天主要使用动画QPropertyAnimation来进行实现! 数据加载的时候,往往都需要后台线程进行数据请求,而 ...
在 Node.js 中操作 Redis
在 Node.js 中操作 Redis Node.js 中可以操作 Redis 的软件包推荐列表:https://redis.io/clients#nodejs. 推荐下面两个: node-redis ...

js实现操作等待提示loading……

js实现操作等待提示loading……相关推荐

最新文章

热门文章