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" οnclick="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 就要看各位的需求自己去写了  我这边就为了方便 直接





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值