jquery:验证码倒计时

时间:2021-03-20 22:04:39

上周 有点忙 :所以现在把补齐了。

1、HTML

<div class="center">
  <div class="member-code">发送验证码</div>
</div>

2、css

<style>

  color: white;

  background-color:  green;

  width: 100px;

  padding: 5px;

  text-align: center;

</style>

3、

<script>
  $(function(){
  var i=0;
  $('.center').on('click','.member-code',function(){
    if(i<1){
    i++;
    $('.member-code').html("未收到验证码?<span class='member-count-down'>10</span>秒后重新发送");

    var memberCountDown = $('.member-count-down').html();
    var timer1 = setInterval(function(){
      memberCountDown--;
      $('.member-count-down').html(memberCountDown);
        if(memberCountDown<=-1){
        i=0;
        clearInterval(timer1);
          $('.member-code').html("获取验证码");
        }
      },1000);

    }
  })
});
</script>

  这个还是有缺陷的、就是刷新页面、下次补充一下。