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

现在使用手机号+验证码的方式注册账号已经成为一种必备功能，当我们输入手机号点击发送验证码按钮后，按钮应该不可被再次点击，并开始倒计时，倒计时结束后才能再次点击。这一个可以借助某些插件实现，但其实使用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是在倒计时结束后结束计时器，防止循环。