首页 > 其他 > 详细

获取验证码倒计时

时间:2017-05-16 12:08:32      阅读:234      评论:0      收藏:0      [点我收藏+]

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

 

获取验证码倒计时

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!