三种方法使用jquery获取验证码倒计时，并设置防重复点击

三种方法使用jquery获取验证码倒计时，并设置防重复点击

<div class="root">

<br>
  <br>
  <button class="btn">获取验证码1</button>
  <br>
  <br>
  <button class="btn1">获取验证码2</button>
  <br>
  <button class="btn3">获取验证码3</button>
  </div>
<script type="text/javascript">

// 一 利用绑定和解绑点击事件
    let  time1 = 10;
    var  count = time1;
    var countinterval;
var button = $('.btn');
    button.click(showTitle);
    function showTitle(){
      console.log(00000);
      countinterval = setInterval(timecount, 1000);
      button.off('click',showTitle);//解绑点击事件
    }
    function timecount(){
      button.text(count+'s');  
      if (count<=0) {
      count = time1;
      clearInterval(countinterval);
      button.text('重新获取验证码');
      button.on('click',showTitle);  
      }
      else
        count--;
    }

//二 设置disabled属性

  let time2 = 15;//15s
  var count1 = time2;
  var countinterval2;
  var button2 = $('.btn1');
  button2.click(showtitle2);
  function showtitle2(){
    console.log(11111);
    // button2.off();
    countintervalt = setInterval(timecount1,1000);
    button2.attr('disabled',true);
  }
  function timecount1(){
     button2.text(count1+'s');
    if (count1<=0) {
      count1 = time2;
      clearInterval(countintervalt);
      button2.text('重新获取验证码');
      button2.attr('disabled',false);
    }
    else
      count1--;
  }
//三  加标识
  let time3 = 20;//15s
  var canclick=true;
  var count2 = time3;
  var countinterval3;
  var button3 = $('.btn3');
  button3.click(showtitle3);
  function showtitle3(){
   if (canclick) {
     console.log(11111);
    countinterval3 = setInterval(timecount2,1000);
    canclick = false;


   }
  }
  function timecount2(){
     button3.text(count2+'s');
    if (count2<=0) {
      count2 = time3;
      clearInterval(countinterval3);
      button3.text('重新获取验证码');


      canclick = true;
    }
    else
      count2--;
  }


</script>