<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>loadding</title>
<style type="text/css">
* { padding: 0; margin: 0; }
html, body { font-size: 12px; text-align: center; }
.hide { display: none; }
#btnSearch{ margin:20px 0;}
#container { position: relative; width: 500px; height: 500px; line-height:500px; border: 1px solid #666; margin: 0 auto; }
#loadding { position: absolute; top: 50%; left: 50%; margin-left: -40px; margin-top: -10px; width: 80px; height: 20px; line-height: 25px; border: 1px solid #f60; background-color:#FAFBFC; }
</style>
<script type="text/javascript">
function loadding() {
document.getElementById("loadding").style.display = "block";
setTimeout(fnTimeOut, 6000); //6秒钟之后页面没刷新则隐藏loadding
}
function fnTimeOut() {
document.getElementById("loadding").style.display = "none";
alert("查询已经超时!");
}
</script>
</head>
<body>
<form runat="server">
<%--<input type="button" id="btnSearch" name="btnSearch" onclick="loadding()" />--%>
<br />
<input type="button" id="btnSearch" name="btnSearch" onclick="loadding()" value="show">
<div id="container">
数据显示容器
<div id="loadding" class="hide" style="left: 50%; top: 50%">
加载中...</div>
</div>
</form>
</body>
</html>
让他变成从数据库查询信息。