发送验证码后,显示倒计时10s后重新获取

<input type="text">
<button>获取验证码</button>
<script>
  var btn = document.querySelector('button');
  var t = 10;

  //设置监听事件,按下按钮后禁用按钮
  btn.addEventListener('click',function(){
    btn.disabled = true;
    //添加定时器,时间间隔为一秒
    var time = setInterval(function(){
      if(t==0){//如果倒计时等于0了,清除计时器,恢复按钮,将t重置为10,否则按钮中文字改变,t递减。
        clearInterval(time);
        btn.disabled=false;
        btn.innerHTML='获取验证码';
        t=10;
      }else{
        btn.innerHTML='您可以在'+t+'秒后再次获取';
        t--;
      }
    }, 1000);
  })
<script>
 

 

posted @ 2021-11-03 15:46  天官赐福·  阅读(195)  评论(0编辑  收藏  举报
返回顶端