获取验证码倒计时

  做到有关用户注册的时候,会遇到获取验证码的时候,验证码会有一个60s的倒计时,工作中写了一个原生js代码。

html

<span id="get_code">获取验证码</span>

js

function handle_code(){
  window.get_code.removeEventListener("click", handle_code, false);  //按钮点击之后,移除点击事件
  var time_num = 60; //倒计时的时间
  //请求接口部分
  //请求成功
  window.get_code.classList.add('code_active'); //倒计时的时候,需要显示的样式
  window.get_code.innerHTML = '60秒后重新发送';
  code_interval = setInterval(function(){  //倒计时的函数
    time_num = time_num - 1;
    if(time_num == 0){
      window.clearInterval(code_interval);
      window.get_code.innerHTML = '获取验证码';
      window.get_code.classList.remove('code_active');
      window.get_code.addEventListener("click", handle_code, false);  //如果倒计时结束,在添加上点击事件
    }else{
      window.get_code.innerHTML = time_num+'秒后重新发送';
    }
  },1000);
  //请求失败弹出请求失败的信息
}
window.get_code.addEventListener("click", handle_code, false);

 

posted @ 2017-05-16 11:31  蔡春保  阅读(155)  评论(0编辑  收藏  举报