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

// 验证码倒计时
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);
};

主要用于移动端

posted @ 2018-03-01 15:32  月半流云  阅读(134)  评论(0编辑  收藏  举报