一个最简的短信验证码倒计时例子

// 验证码倒计时
var CountDown = function(options) {
  // 初始化配置信息
  options = options || {};
  // DOM节点
  if(typeof options.element === 'string') {
    this.element = document.querySelector(options.element);
  } else {
    this.element = options.element;
  }
  // 触发事件类型
  this.eventType = options.eventType || 'click'; //默认click事件触发
  // 间隔时间
  this.interval = options.interval || 60; //默认60s间隔
  // 原有的文本
  this.oldText = this.element.innerText;
  // 开始
  this.start = function() {
    this.element.setAttribute('disabled', 'disabled');
    this.timer = window.setInterval(function() {
      if(!!this.interval) {
        this.count();
      } else {
        this.end();
      }
    }.bind(this), 1000);
  };
  // 计算
  this.count = function() {
    this.element.innerText = '重新发送(' + this.interval + ')';
    this.interval -= 1;
  };
  // 结束
  this.end = function() {
    if(!!this.timer) {
      window.clearInterval(this.timer);
      delete this.timer;
    }
    this.reset();
  };
  // 重置
  this.reset = function() {
    this.element.innerText = this.oldText;
    this.element.removeAttribute('disabled');
    this.interval = options.interval || 60;
  };
  // 绑定事件
  this.element.addEventListener(this.eventType, this.start.bind(this), false);
};

主要用于移动端

转载于:https://www.cnblogs.com/xiaoyucoding/p/8488679.html