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