手机发送验证码倒计时

前言：手机号登录的时候常常需要验证码倒计时功能，本文介绍下用jquery如何实现

一、jquery实现

 先上效果

 

 

步骤：

1）html

<!-- 登录 -->
<div class="login_content">
    <div class='phone_div'>
        <input type="text" class='phoneInput' maxlength="11" placeholder='请输入您的手机号'>
    </div>
    <div class='code_cont'>
        <div class='code_div'>
            <input type="text" class='codeInput' maxlength="6" placeholder='请输入验证码'>
        </div>
        <button class="send_sms_code" onclick="getIdentifyCodeByTel()">获取验证码</button>
    </div>
    <input type='button' onclick='userLogin()' class='login_btn' value="登录">
</div>

2）css

/* ******登录弹框******* */
.login_regist {
    display: none;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    >.regist_cont {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 327px;
        height: 230px;
        padding: 30px 10px 14px 10px;
        text-align: center;
        background-color: white;
        >.loginclose_img {
            width:14px;
            height:14px;
            float:right;
            margin-top: -15px;
        }
        >.login_title p{
            color:rgb(153, 153, 153);
        }
    }
}

input::-webkit-input-placeholder{
    color: rgb(153, 153, 153);
}


.login_regist input {
    border-radius: 5px;
    border: 0;
    height: 40px
}

.code_cont {
    text-align: center;
    margin-top: 14px;
    display:flex;
}

.phone_div {
    width:100%;
    margin-top: 20px;
    border:1px solid rgb(191, 191, 191);
    border-radius:5px;
}

.phoneInput {
    padding: 0 3px;
    width: 100%;
    border-radius: 5px;
}

.code_div {
    border:1px solid rgb(191, 191, 191);
    border-radius:5px;
}

.codeInput {
    width: 150px;
    padding: 0 3px;
    border-radius: 5px;
}

.send_sms_code {
    width: 145px;
    margin-left: 10px;
    background-color: rgb(255, 86, 75);
    border: none;
    color: white;
    border-radius: 5px;
}

.login_btn {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    background-color: rgb(255, 86, 75);
    border: none;
    color: white;
    outline:0px;
    -webkit-appearance: none;
    font-weight: bold;
}

3）js（核心代码）

// 调用发送验证码接口
function getIdentifyCodeByTel() {
    var phoneNumber = $(".phoneInput").val();
    var myreg = /^(((19[0-9]{1})|(16[0-9]{1})|(13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    if (CommonUtils.isEmpty(phoneNumber)) {
        alert("请输入手机号！")
    }else if (!myreg.test(phoneNumber)) {
        alert("手机号有误！")
    }else {
        // 调用接口
        AjaxUtils.ajax({
            type: 'POST',
            url: request_path.mock + 'v1/commonservice/alysms',
            data: {
                "msg_type": 1,
                "phone": phoneNumber
            },
            success: function(data, textStatus, jqXHR) {
                let code = data.code;
                let msg = data.note;
                // 成功
                if (code == 200) {
                    settime();
                } else { // 失败
                    alert(msg)
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {

            }
        });
    }
}

// 验证码倒计时
let countdown = 60;
function settime() {
    if(countdown == 0) {
        $(".send_sms_code").text('重新获取');
        $(".send_sms_code").attr("disabled",false);
        countdown = 60;
    } else {
        $(".send_sms_code").text('剩余(' + countdown + ')秒');
        $(".send_sms_code").attr("disabled",true);

        countdown--;

        setTimeout(function () {
            settime();
        }, 1000)
    }
};

 点击“获取验证码”按钮后调用后台获取验证码接口，成功后再调用settime()方法。

这里主要是一个countdown--，每次都减一。然后就是递归调用settime()方法知道countdown == 0时结束。