前端展示效果:
代码:
<input type="text" id="telephone" value="" name="telephone" placeholder="手机号" />
<input type="text" value="" name="checkCode" placeholder="请输入验证码" />
<input type="button" onclick="sendCode(this)" value="获取验证码">
//倒计时时间
var time = 10;
//定时器id,用于结束定时器
var intervalID;
//按钮对象
var bo;
//参数:获取验证码按钮对象
function sendCode(buttonObj) {
//校验手机号格式是否正确
//1 定义正则对象
var regExp = new RegExp("^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$", "g");
//2 校验
if(!regExp.test($("#telephone").val())) {
//失败=>提示请输入正确的手机号
layer.msg("请输入正确的手机号");
return;
}
//------------------------------------------------------------------
//ajax请求后台发送手机验证码短信 url:向后台发送请求链接
$.post(url, {
telephone: $("#telephone").val()
});
//------------------------------------------------------------------
bo = buttonObj;
//1.点击按钮后,按钮变灰(禁用).并改变按钮上的文字为60秒后重新发送
bo.disabled = true;
bo.value = time + "秒后重新发送";
//2.设置一个js定时器,每隔一秒触发一次方法
intervalID = setInterval(timeCount, 1000);
}
function timeCount() {
time = time - 1; //让秒数减一.
//3.书写触发的方法:
//判断秒数是否大于0
if(time > 0) {
//大于0 = 更新按钮上的文字
bo.value = time + "秒后重新发送";
} else {
//等于0 = 按钮恢复可以点状态,按钮上文字重新变为"获取验证码"
bo.disabled = false;
bo.value = "获取验证码";
time = 10;
//停掉定时器
clearInterval(intervalID);
}
}