码迷,mamicode.com
首页 > 其他好文 > 详细

获取验证码倒计时

时间:2017-05-16 13:15:01      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:click   点击事件   tin   nbsp   cti   htm   clear   style   需要   

  做到有关用户注册的时候,会遇到获取验证码的时候,验证码会有一个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);

 

获取验证码倒计时

标签:click   点击事件   tin   nbsp   cti   htm   clear   style   需要   

原文地址:http://www.cnblogs.com/caichunbao/p/6860511.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!