jquery 发送验证码60s倒计时，后重新发送

素颜马尾好姑娘i 2022-05-15 10:23 192阅读 0赞

#html
    <div class="user_code">
        <input type="text" placeholder="请输入验证码" name="code" >
        <input type="button" class="getCode"  value="发送">
    </div>
    
    
    
    #js
    //发送验证码
            $(".getCode").click(function(){
                var phone=$("#mobile").val();
                var pattern =/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
    
    
                if($.trim(phone)==""){
                    layer.alert("请输入电话号码");
                    return;
                }
                if(!pattern.test(phone)){
                    layer.alert("请输入正确的电话号码");
                    return;
                }
                var _this=this;
    
                $.ajax({
                    url: "{:U('Public/sendverifycode')}",
                    type: 'POST',
                    dataType: 'JSON',
                    data: {'mobile':phone},
                    success: function (data) {
                        if (data.code == 0) {
                            send($(_this));
                            layer.alert("短信发送成功");
                        } else {
                            var mes=data.message;
                            layer.alert(mes);
                        }
                    }
    
                });
            });
    
    
    var countdown=60;
    send=function(obj){
    	if (countdown == 0) {
    		obj.removeAttr('disabled');
    		obj.attr('value','发送');
    		countdown = 60;
    		return;
    	} else {
    		obj.attr('disabled','disabled');
    		obj.attr('value',"重新发送(" + countdown + ")");
    		countdown--;
    	}
    	setTimeout(function() {
    			send(obj) }
    		,1000)
    }