zoukankan      html  css  js  c++  java
  • 页面提交时,显示“提交中”等待效果

    由于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     }
  • 相关阅读:
    springboot的整合篇-springmvc,mybatis,数据库等
    快速搭建springboot工程
    Git常用命令
    SpringBoot整合通用Mapper
    SpringBoot项目部署
    实例化调用和静态方式调用的区别
    CentOS系统安装PHP7.3
    CentOS7部署LNMP环境
    Apache和Nginx的区别
    Linux系统下卸载MySQL
  • 原文地址:https://www.cnblogs.com/hfliyi/p/2645965.html
Copyright © 2011-2022 走看看