Jquery 禁用 a 标签 onclick 事件30秒后可用

最新推荐文章于 2024-10-16 11:10:39 发布

转载最新推荐文章于 2024-10-16 11:10:39 发布 · 511 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/SoraAoi/p/3216557.html

标签

#javascript #ViewUI

本文介绍了一个使用jQuery和Ajax实现的短信发送功能，当点击发送按钮时，会将手机号码发送到服务器端，服务器端返回消息后，页面上会显示发送成功的信息，并且在发送后禁用按钮30秒。

<a href="javascript:;" id="sendToTel" >发送短信</a>

<script type="text/javascript">
        $(document).ready(function () {
            $("#sendToTel").click(function () {
                var mobile = $("#txtMobile").val();
                $.ajax({
                    type: "POST",
                    url: "/Ajax/SmsAddress.ashx",
                    data: "Mobile=" + mobile + "",
                    dataType: "text",
                    success: function (msg) {
                            $("#sendToTel").html("<i>发送成功</i>");
                            //在这里禁用30秒  然后才可以重新点
                    }
                });
            });

            var canSend;
            function updateTime(time) {
                var linkBtn = $("#sendToTel");
                linkBtn.html(time <= 0 ? "<i>发送短信</i>" : ("<i>" + time + "秒后可重新发送</i>"));
                var hander = setInterval(function () {
                    if (time <= 0) {
                        canSend = false;
                        clearInterval(hander);
                        linkBtn.html("<i>发送短信</i>");
                        linkBtn.removeAttr("disabled");
                    }
                    else {
                        canSend = true;
                        linkBtn.attr({ "disabled": "disabled" });
                        linkBtn.html("<i>" + time + "秒后可重新发送</i>");
                    }
                }, 1000);
            }
        });
    </script>

转载于:https://www.cnblogs.com/SoraAoi/p/3216557.html