zoukankan      html  css  js  c++  java
  • 获取验证码倒计时

      做到有关用户注册的时候,会遇到获取验证码的时候,验证码会有一个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);
  • 相关阅读:
    面向对象之继承
    面向对象
    Python—文件和内建函数 open(),file()
    如何在命令行打开文件夹?
    Anaconda在win10下的安装
    Python—for循环和range()内建函数
    python—基础练习2
    python—数据类型
    python—字符编码
    python—基础练习1
  • 原文地址:https://www.cnblogs.com/caichunbao/p/6860511.html
Copyright © 2011-2022 走看看