工作中点滴记录

永远保持学徒心态

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

由于web开发的特点,有的时候提交数据量较大或者计算量较大的页面,需要等待很长时间,整个页面都刷新成白的啦,给人的感觉很不舒服,有的时候提交后,页面反应慢,用户以为没有提交成功,所以又提交一次,从而造成重复提交的情况,所以需要一种简单的“提交中”的特效,此时页面上的其他东西不允许点击,鼠标变成漏斗状,通过这可以避免重复提交。

实现方式,页面源代码:

页面源码
 <div id="running" runat="server" style="z-index: 12000; left: 0px; width: 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     }
posted on 2012-08-18 23:25  梦里故乡  阅读(3538)  评论(1编辑  收藏  举报