jquery短信验证按钮读秒效果

jquery短信验证按钮读秒效果

假设我们接口返回的数据为json
{code: 0, msg: "短信发送失败!"}
{code: 1, msg: "短信发送成功!"}

以下是html代码

  <li>
       <img src="__PUBLIC__/home/images/login/login_icon_07.png"/>
       <input name="mobile" id="mobile" type="text" placeholder="请输入手机号"/>
  </li>
  <li class="ver_code_box">
       <img src="__PUBLIC__/home/images/login/login_icon_10.png"/>
       <input name="code" id="code" type="text"  placeholder="请输入验证码"/>
       <button id="smsCode" type="button">获取验证码</button>
  </li>

以下是jquery代码.

   $("#smsCode").click(getCode);
        var time=60,times='';
        function getCode(){
            if(time<60) return false;
            var mobile=$("#mobile").val();

            if(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9])\d{8}$/.test(mobile)){
                $.ajax({
                    type : "post",
                    url  : "{:url('user.login/SendSms')}",
                    data : {phone : mobile},
                    success :function (res){
                        var resData = $.parseJSON(res);
                        console.log(resData);
                        if(resData.code == 1){
                            layer.msg('验证码发送成功，请注意查收',{icon:1});
                            time--;
                            times =  setInterval(timer, 1000);
                        }else{
                            layer.msg(resData.msg   ,{icon:2});
                        }
                    }
                })
            }else{
                layer.msg('手机号填写错误',{icon:2});
            }
        }
        function timer(){
            var code = $("#smsCode");
            if(time == 0){
                time = 61;
                code.text('获取验证码');
                clearInterval(times);
            }else{
                code.text(time+'秒后重新获取');
            }
            time --;
        }

以上就是 , jquery短信验证按钮读秒效果的演示 , 可以根据实际情况调整