使用Jquery实现获取短信验证码60秒倒计时

Posted 2021-04-08 小可THINKPHP学堂

现在使用手机号+验证码的方式注册账号已经成为一种必备功能，当我们输入手机号点击发送验证码按钮后，按钮应该不可被再次点击，并开始倒计时，倒计时结束后才能再次点击。这一个可以借助某些插件实现，但其实使用Jquery也可以非常容易实现。假设我们使用button作为发送按钮：

<button type="button" name="button">点击获取验证码</button>

点击事件我们可以这样写：

$("button[name='button']").click(function(event) {
    //这里写发送验证码的代码    var time = 60;    settime($(this));    
    function settime(obj){                
        if (time==0) {
            $(obj).attr('disabled', false);            $(obj).html("点击获取验证码");            time = 60;                    
            return;        } else{            $(obj).attr('disabled', true);            $(obj).html(time+"秒后重新发送");            time--;        }        setTimeout(function() {            settime(obj)        },1000)    } });

中间发送短信的功能，可以参考Thinkphp5.1使用阿里云平台发送短信验证码这篇文章。其中第一个if当中的return是在倒计时结束后结束计时器，防止循环。