jQuery手机倒计时验证

收藏

本文以实例演示了发送短信成功后，120秒后再次发送，即在这120秒以内，发送短信按钮不可点击。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

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

jQuery

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);
        }
    })
}