步骤:1、获取div修改css样式 2、设置定时器每秒调用一次 判断函数(如果大于0,显示倒计时,否则清除定时器,把按钮改为可用)
<div id="get-code">获取验证码</div>
$(function () {
var timer = '';
var timing = 5;
var running = false
var send_p_code = $('#get-code');
$("#get-code").click(function () {
// 防止重复点击
if (running) {
return
}
running = true
send_p_code.text(timing + '秒后重新获取');
send_p_code.css('cursor', 'not-allowed')
timer = setInterval(() =>{
timing--;
if (timing > 0) {
send_p_code.text(timing + '秒后重新获取');
} else {
clearInterval(timer); //清除js定时器
timing = 5; //重置时间
send_p_code.text('获取验证码');
running = false
send_p_code.css('cursor', 'default')
}
}, 1000); //一秒执行一次
})
/**
* 提示:
* 如果用input做按钮
* 1、$("#get-code").attr("disabled","false");不起作用
* 2、disabled只能禁用button,对超链接不起作用
*/
send_p_code.attr('disabled', true); //将按钮置为不可点击
send_p_code.removeAttr('disabled'); // 取消
// 鼠标禁用与默认样式
send_p_code.css('cursor', 'not-allowed')
send_p_code.css('cursor', 'default')
})