定时设置按钮可用性，防止不间断提交

最新推荐文章于 2018-02-03 17:57:22 发布

joyhen

最新推荐文章于 2018-02-03 17:57:22 发布

阅读量2.2k

点赞数

分类专栏： ASP.NET 文章标签： setTimeout

本文链接：https://blog.csdn.net/Joyhen/article/details/8603599

版权

ASP.NET 专栏收录该内容

111 篇文章 0 订阅

订阅专栏

如有不明白的地方欢迎加QQ群14670545 探讨

18位长度的计时周期数： DateTime.Now.Ticks.ToString()

<script type="text/javascript">
//$j = jQuery.noConflict();
var time_begin = new Date();
var settime=3;
var i;
var showthis;
$(document).ready(function() {
    for(i=1;i<=settime;i++) {
        setTimeout("update("+i+")",i*1000);
    }
});

function update(num) {
    if(num==settime) {
        $("#next_button").attr("disabled",false);
        $("#surplus_time").text("");
    }
    else {
        showthis=settime-num;
        $("#surplus_time").text(showthis);
        $("#next_button").attr("disabled",true);
    }
}
</script>

下面来一个具体的例子：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pattern_memo.aspx.cs" Inherits="MyWebSiteTest.DesignPatterns.pattern_memo" %>

<!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 runat="server">
    <title>测试</title>
    <script src="../Js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //$j = jQuery.noConflict();  
        var time_begin = new Date();
        var settime = 4;
        var i;
        var showthis;
        $(document).ready(function () {
            $("#next_button").attr("disabled", true);
            for (i = 1; i <= settime; i++) {
                setTimeout("update(" + i + ")", i * 1000);
            }
        });

        function update(num) {
            if (num == settime) {
                $("#next_button").attr("disabled", false);
                $("#surplus_time").text("");
            }
            else {
                showthis = settime - num;
                $("#surplus_time").text(showthis);
                $("#next_button").attr("disabled", true);
            }
        }  
</script>  
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <span id="surplus_time"></span><br />
        name:<asp:TextBox runat="server" ID="txtname" /><br />
         pwd:<asp:TextBox runat="server" ID="txtpwd" /><br />
        <asp:Button runat="server" ID="next_button" Text="提交" OnClientClick="return checkinput();" οnclick="next_button_Click" />
    </div>
    </form>
    <script type="text/javascript">
        function checkinput() {
            var _name = document.getElementById("txtname");
            var _pwd = document.getElementById("txtpwd");
            if ($.trim(_name.value) == "") {
                $("#surplus_time").text("please write your name");
                _name.focus();
                return false;
            }
            if ($.trim(_pwd.value) == "") {
                $("#surplus_time").text("please write your pwd");
                _pwd.focus();
                return false;
            }

            return true;
        }
    </script>
</body>
</html>

public partial class pattern_memo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void next_button_Click(object sender, EventArgs e)
        {

        }
    }

注意了，在页面的ready之后一定要加上一句

$("#next_button").attr("disabled", true);

否则会有简短的一秒左右button按钮是可用状态的，而如果你直接在button按钮上面添加Enabled（disabled）属性，则OnClientClick方法将不会奏效。

看看效果比较：

joyhen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时设置按钮可用性，防止不间断提交

18位长度的计时周期数： DateTime.Now.Ticks.ToString()//$j = jQuery.noConflict();var time_begin = new Date();var settime=3;var i;var showthis;$(document).ready(function() { for(i=1;i<=settime;i++) {
复制链接

扫一扫