jq手机倒计时验证

直接上代码

        <div class="container">
            <div class="demo">
                <div style="height: 60px;" id="phone_area">
                    <span class="red">*</span>
                    手机号:
                    <input type="text" class="input" name="phone" id="phone" placeholder="请输入手机号" autocomplete="off"/>
                       <input type="button" value="获取验证码" class="btn" id="sendPhoneCode" onclick="send_phone_code()" autocomplete="off"/>
                </div>
            </div>
        </div>

css:       

<style type="text/css">

            .disabled {
                opacity:.6;
                filter:alpha(opacity=60)
            }

   </style>

jq:

        <script type="text/javascript">
                        var wait = 120;//倒计时120秒
                        var intervalId;//定时
                        var i = wait;//倒计时递减 1
                        function exit() {
                            $("#sendPhoneCode").val(i + "秒后重新发送").addClass("disabled");
                            i = i - 1;
                            if (i <= -1) {
                                clearInterval(intervalId);
                                $("#sendPhoneCode").removeAttr("disabled");
                                $("#sendPhoneCode").val("发送验证码").removeClass("disabled");
                            }
                        }
                        function send_phone_code() {

                            var phone = $("#phone").val();
                            if (phone == '') {
                                alert("请输入手机号!");
                                return false;
                            }
                            if (!phone.match(/^(((13[0-9]{1})|159|153)+\d{8})$/)) {
                                alert("手机号格式有误!");
                                return false;
                            }

                            i = wait;
                            $.post("ajax.php", {
                                "phone": phone
                            }, function(data) {
                                if (data == 1) {
                                    $("#sendPhoneCode").attr("disabled", "disabled");
                                    $("#sendPhoneCode").val("发送成功");
                                    intervalId = setInterval("exit()", 1000);
                                }
                            })
                        }

        </script>

ajax.php 就要看各位的需求自己去写了  我这边就为了方便 直接





猜你喜欢

转载自blog.csdn.net/qq_36591333/article/details/79431510
今日推荐