1. 获取当前的按钮
$(function()){
$("#send-btn").click(function(event)){
event.perventDefault();
// 获取获取验证的按钮
var self = $(this);
// ...
}
};
2. 设置获取验证码的倒计时
理一下思路
- 发送成功,
disabled
禁用按钮 - 局外设置按钮倒计时
var timeCount = 60;
- 使用
setInterval(func,millisec)
方法
- 开始倒计时
timeCount --
- 设置按钮提示倒计时文本
self.text()
- 判断
timeCount <= 0
:
- 移除禁用
disabled
属性 - 恢复按钮原始文本
- 清除Interval(
clearInterval()
)
// 1.
self.attr("disabled", 'disabled');
// 2.
var timeCount = 60;
// 3.
var timer = setInterval(function () {
timeCount --;
self.text(timeCount+"s 后重新发送");
// 4.
if (timeCount <= 0){
self.removeAttr("disabled");
self.text("获取验证码");
clearInterval(timer)
}
}, 1000);
源代码
$(function () {
$("#send_tel_captcha").click(function (event) {
event.preventDefault();
var tel = $("input[name=tel]").val();
var self = $(this);
if(!(/^1[34578]\d{9}$/.test(tel))){
xtalert.alertInfo("请输入正确的手机号码");
return;
}
jajax.get({
"url": "/c/sms_captcha/?tel="+tel,
"success": function (data) {
if (data['code'] == 200){
xtalert.alertSuccessToast("验证码发送成功, 请注意查收");
self.attr("disabled", 'disabled');
var timeCount = 60;
var timer = setInterval(function () {
timeCount --;
self.text(timeCount+"s 后重新发送");
if (timeCount <= 0){
self.removeAttr("disabled");
self.text("获取验证码");
clearInterval(timer)
}
}, 1000);
}else{
xtalert.alertInfo(data['message'])
}
},
'fail': function (error) {
xtalert.alertNetworkError()
}
})
});
});