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短信验证按钮读秒效果的演示 , 可以根据实际情况调整