项目经验 jsp页面锁屏正在加载的效果

最新推荐文章于 2025-05-21 09:38:41 发布

原创最新推荐文章于 2025-05-21 09:38:41 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 3 个专栏收录

9 篇文章

订阅专栏

css

6 篇文章

订阅专栏

Jquery

1 篇文章

订阅专栏

通过使用JavaScript和CSS，实现jsp页面加载时显示一个进度条式的锁屏效果，提供两种方法。在HTML中设置相关div，并在CSS中定义样式以达到视觉效果。

第一种方法：首先写两个js方法：

function lockscreen()     
{    
var sWidth,sHeight;     
sWidth=screen.width;     
sHeight=screen.height;     
  
var bgObj=document.createElement("div");     
bgObj.setAttribute('id','bgDiv');     
//bgObj.innerHTML="<br /><br /><br /><br /><b>The Screen Lock Means That You Can't Click Any Button Or Link On The Page~!     <a href="javascript:window.location.reload();" mce_href="javascript:window.location.reload();">unlock screen</a></b>"  
bgObj.style.position="absolute";     
bgObj.style.top="0";     
bgObj.style.background="#cccccc";     
//bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";     
bgObj.style.opacity="0.6";     
bgObj.style.left="0";     
bgObj.style.width=sWidth + "px";     
bgObj.style.height=sHeight + "px";     
bgObj.style.zIndex = "100";     
document.body.appendChild(bgObj);     
}  

function unlock(){
	$("#bgDiv").remove();
}

然后在jsp页面中调用：

//导入入流数据
function importInFlowExcel(){
	var fom=document.getElementById('form1');
	var fileValue = $$("iffile").value;
	if(!validate(fileValue)){
		return;
	}
	var ajaxbg = $("#background,#progressBar"); 
	lockscreen();
	ajaxbg.show(); 
<%-- 	Ext.getBody().mask("<div style='margin-left:40%;top:180px;px;position:relative;width:300px;height:200px;color:#3e72b9'><img src='<%=basePath%>images/icon/waiting.gif'>请稍等，正在导入...","x-mask-loading</div>"); --%>
	Ext.Ajax.request({
 		form:fom,
 		url:'<%=basePath%>forcast/ycybfaxx/importInFlowExcel.action',
 		method:'post', 
 		success: function(response, options) {
//  			Ext.getBody().unmask();
			ajaxbg.hide(); 
 			unlock();
 			var alarms = eval('('+response.responseText+')');	
			if(!alarms["success"]){
				showMsg("导入入流数据失败，请检查数据格式");
			}else{
				var dvcontent = $$('dv-content1');
	 			inflowlist = alarms.data;
	 			var str ="";
	 			str = str+"<table  width='180px' border='1' cellspacing='0' cellpadding='0' class='altrowstable' style='margin:0px auto;'> ";
	 			str = str+"<tr class='headcolor' align='center' height='14px'><td nowap='nowap' width='60px'>时间</td><td nowap='nowap' width='60px'>距离</td><td nowap='nowap' width='60px'>入流流量</td></tr>";
	 			for (var i = 0; i < alarms.data.length; i++) {
	 				str = str+"<tr><td width='60px'>"+alarms.data[i].time+"</td>";
	 				str = str+"<td width='60px'>"+alarms.data[i].distance+"</td>";
	 				str = str+"<td width='60px'>"+alarms.data[i].inflow+"</td>";
	 				str = str+"</tr>";
	 				
	 			}
	 			str = str+"</table>";
	 			dvcontent.innerHTML =str;
				showMsg('导入入流数据成功');
			}
 		},
    	failure:function(){
    		showMsg('导入入流数据失败，请检查数据格式');
        }
 	});
}

在css中配上backgroud progressBar样式：

<!--加载效果-->
	.background { 
display: block; 
width: 200px; 
height: 30px; 
opacity: 0.4; 
filter: alpha(opacity=40); 
background:while; 
position: absolute; 
top: 0; 
left: 0; 
z-index: 2000; 
} 
.progressBar { 
border: 0; 
background: white url(progressBar_m.gif) no-repeat 10px 10px; 
background:url(http://ok22.org/upload/images/20110902143538381.gif) no-repeat 0 center;padding-left:35px;display:inline-block;
} 
.progressBar { 
display: block; 
width: 200px; 
height: 30px; 
position: fixed; 
top: 50%; 
left: 50%; 
margin-left: -74px; 
margin-top: -14px; 
padding: 10px 10px 10px 50px; 
text-align: left; 
line-height: 27px; 
font-weight: bold; 
position: absolute; 
z-index: 2001; 
}

在html中配上backgroud progressBar 两个div：

<body>
	<div id="dv-pageoutline">
        <div id="dv-page">
            <!-- 头部 -->
            <div id="dv-header">
                <jsp:include page="/module/common/header.jsp"></jsp:include>
            </div>
		    <!--内容-->    
		    <div id="dv-content"> 
				<div id="dv-middle-panel">
				<div id="background" class="background" style="display: none; "></div> 
				<div id="progressBar" class="progressBar" style="display: none; ">正在操作，请稍等...</div>
					<form name="form" id="formId"  method="post" enctype="multipart/form-data">