手机发送验证码

 

1 需求

发送短信以后，再次发送短信按钮变得不可用，倒计时60秒以后才可以使用

2 步骤

创建按钮倒计时的方法：function countDown(count)，在发送短信请求以后调用

1. 发送短信按钮不可用

2. 每过1秒调用1次匿名函数

3. 匿名函数中计数减1

4. 按钮上的文字变为：x秒后可再次发送验证码

5. 如果计数变为0

6. 按钮变得可用

7. 文本变成：发送手机验证码

8. 清除计时器

3 代码

//发送短信的按钮
$("#sendSmsCode").click(function () {
    //获取手机号
    let telephone = $("#telephone").val().trim();
    //验证手机格式
    let reg = /^1[35789]\d{9}$/;
    if (reg.test(telephone)) {
        //清空
        $("#telephoneInfo").text("");

        //验证通过，后台访问服务器
        $.get({
            url:"user",
            data: {
                action: "sendSms",
                telephone: telephone
            },
            success: function (resultInfo) {
                //发送成功
                if (resultInfo.success) {
                    $("#msg").css("color", "green").text(resultInfo.message);
                }
                //发送失败
                else {
                    $("#msg").css("color", "red").text(resultInfo.message);
                }
            }
        });
        //调用倒计时
        countDown(10);
    }
    else {
        //验证不通过
        $("#telephoneInfo").css("color", "red").text("手机号格式错误");
        //选中手机号
        $("#telephone").select();
    }
});

/**
 * 倒计时
 * @param count 秒数
 */
function countDown(count) {
   //1. 发送短信按钮不可用
    $("#sendSmsCode").prop("disabled", true);
   //2. 每过1秒调用1次匿名函数, 获取返回值，用来清除计时器
    let timer = setInterval(function () {
       //3. 匿名函数中计数减1
        count--;
       //4. 按钮上的文字变为：x秒后可再次发送验证码
        $("#sendSmsCode").val(count + "秒后可再次发送验证码");
       //5. 如果计数变为0
        if (count == 0) {
           //6. 按钮变得可用
            $("#sendSmsCode").prop("disabled", false);
           //7. 文本变成：发送手机验证码
            $("#sendSmsCode").val("发送手机验证码");
           //8. 清除计时器
            clearInterval(timer);
        }
    }, 1000);
}