由于web开发的特点,有的时候提交数据量较大或者计算量较大的页面,需要等待很长时间,整个页面都刷新成白的啦,给人的感觉很不舒服,有的时候提交后,页面反应慢,用户以为没有提交成功,所以又提交一次,从而造成重复提交的情况,所以需要一种简单的“提交中”的特效,此时页面上的其他东西不允许点击,鼠标变成漏斗状,通过这可以避免重复提交。
实现方式,页面源代码:
页面源码
<div id="running" runat="server" style="z-index: 12000; left: 0px; 100%; cursor: wait; position: absolute; top: 0px; height: 100%;"> <table width="100%" height="100%"> <tr align="center" valign="middle"> <td> <table width="200px" height="200px" bgcolor="gray" style="filter: Aplpa(Opacity=70); color: White;"> <tr align="center" valign="middle"> <td> <div id="Clocktimes"> </div> <br /> 正在提交<br /> 请稍后..... </td> </tr> </table> </td> </tr> </table> </div> <%--<input id="btnOk" value="提交" onclick="btnClick()" type="button" />--%> <asp:Button ID="btnOk" runat="server" Text="提交" onclick="btnOk_Click" />
js代码
js
1 <script language="javascript" type="text/javascript"> 2 var time = 0; 3 function tick() { 4 time = time + 1; 5 var min = Math.floor(time / 60); 6 var second = time - min * 60; 7 document.getElementById("Clocktimes").innerHTML = min + "分" + second + "秒"; 8 } 9 function btnClick() { 10 document.getElementById("running").style.visibility = "visible"; 11 window.setInterval('tick()', 1000); 12 return false; 13 } 14 </script>
后台代码
后台
1 protected void Page_Load(object sender, EventArgs e) 2 { 3 if (!IsPostBack) 4 { 5 this.btnOk.Attributes.Add("onclick", "javascript:document.getElementById('running').style.visibility='visible';window.setInterval('tick()',1000);"); 6 } 7 } 8 protected void btnOk_Click(object sender, EventArgs e) 9 { 10 Thread.Sleep(9000); 11 } 12 protected override void OnPreRenderComplete(EventArgs e) 13 { 14 running.Style.Add("visibility", "hidden"); 15 //base.OnPreRenderComplete(e); 16 }