JQ获取验证码倒计时功能

173 阅读1分钟

步骤: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') 
})