(1)主要的代码
<div id="gcjDhccFullScreen"
style="padding-left:42%;padding-top: 7%;display: none;position: absolute;top: 0;left: 0;
width: window.document.body.offsetWidth;
height: window.document.body.offsetHeight;z-index: 999;">
<table width="100%" height="100%" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<img src="${pageContext.request.contextPath}/images/loading.gif"/>
<div style="text-align: center; font-size: 15px; color:#ff0000;">
数据获取中,请稍后...
</div>
</td>
</tr>
</table>
</div>
(2)images/loading.gif 这个图片放到对应的目录下
(3)调用方法
--->给按钮绑定鼠标单击事件,单击鼠标时调用showDiv函数
<button type="button" οnclick="showDiv()">获取数据</button>
--->实现showDiv函数
<script>
function showDiv() {
var oDiv = document.getElementById('gcjDhccFullScreen');
oDiv.style.display = 'block';
//6秒后执行
setTimeout(function(){
alert('数据获取完成!');
oDiv.style.display = 'none';
},
6000);
}
</script>
PS:提示:也可以使用JQuery进行控制DIV的显示和隐藏
显示div:$("#gcjDhccFullScreen").css("display","block");
隐藏div:$("#gcjDhccFullScreen").css("display","none");