效果图
132.gif
代码
html
<span class="sendcode"><input id="sendcode" type="button" class="btn btn-default" value="获取验证码"/></span>
js
var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; //手机号正则
var count = 60; //间隔函数，1秒执行
var InterValObj1; //timer变量，控制时间
var curCount1; //当前剩余秒数
function sendMessage1() {
curCount1 = count;
var phone = $.trim($('#tel').val());
if(!phoneReg.test(phone)) {
alert(" 请输入有效的手机号码");
return false;
}
console.log('-------')
//设置button效果，开始计时
$("#sendcode").attr("disabled", "true");
console.log($("#sendcode").val(+curCount1 + "秒再获取"))
$("#sendcode").val(+curCount1 + "秒再获取");
InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
//向后台发送处理数据
}
function SetRemainTime1() {
console.log('倒计时')
if(curCount1 == 0) {
window.clearInterval(InterValObj1); //停止计时器
$("#sendcode").removeAttr("disabled"); //启用按钮
$("#sendcode").val("重新发送");
} else {
curCount1--;
$("#sendcode").val(+curCount1 + "秒再获取");
}
}
