页面提交时，显示“提交中”等待效果

由于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="提交" οnclick="btnClick()" type="button" />--%><asp:Button ID="btnOk" runat="server" Text="提交" οnclick="btnOk_Click"  />

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     }

页面提交时，显示“提交中”等待效果相关推荐

git 初次连接使用设置提交时显示的用户名和密码
git 初次连接使用设置提交时显示的用户名和密码 user.email就是自己在提交代码时的账号邮箱 user.name是自己在提交代码时显示的名称 git config --global user. ...
win10 uwp 让焦点在点击在页面空白处时回到textbox中
原文:win10 uwp 让焦点在点击在页面空白处时回到textbox中在网上有一个大神问我这样的问题:在做UWP的项目,怎么能让焦点在点击在页面空白处时回到textbox中? 虽然我的小伙伴认为 ...
ajax提交时“加载中”提示的处理方法
方法1:使用ajaxStart方法定义一个全局的"加载中..."提示 $(function(){ $("#loading").ajaxStart(fun ...
getlab如何编辑提交时显示的用户名_GitHub 如何让你的提交显示被校验
如下面的图片显示的,在提交的时候,如何让我的提交显示被校验呢. 其实流程也不是非常复杂,按照下面的过程来进行配置就可以了. 创建 PGP 上传 PGP 到 GitHub 提交时候配置 PGP 创建 P ...
向SVN提交项目时显示提交成功却没有上传
今天新同事在使用SVN向服务端提交项目时,Android studio上提示提交成功,但服务器端却没有相应内容.现将问题总结如下: 故障出现描述在Android studio中写作开发SVN下的项目 ...
css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title><meta ...
vue页面数据不显示_PHP7中session_start 使用注意事项，会导致浏览器刷时页面数据不更新...
//PHP7中session_start 使用注意事项, session_start(['cache_limiter' => 'private', //在读取完毕会话数据之后马上关闭会话存储文件 ...
git push 提交时显示 Empty reply from server的解决办法
输入 git fetch origin --prune 参考链接:https://stackoverflow.com/questions/28364023/gits-error-on-push-emp ...
html中点击提交按钮显示提交i成功,百里香叶：点击提交按钮后显示成功信息
我有一个spring-boot申请,Thymeleaf.我有非常基本的情况.有一个表单,当用户点击提交按钮时,表单数据应发送到控制器,但在同一页面中应显示成功消息.百里香叶:点击提交按钮后显示成功信息 ...
页面操作时显示“处理中，请稍候。。。”
页面跳转或传递数据至后台时,在JS函数中加该代码,执行时页面显示"处理中,请稍候..." 比较友好. if(window.parent){ var func = window.pa ...

页面提交时，显示“提交中”等待效果

页面提交时，显示“提交中”等待效果相关推荐

最新文章

热门文章