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


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

    主要用于移动端

  • 相关阅读:
    容器字段FieldContainer
    时间选择框
    Java 异常处理的优劣
    RSA 公钥加密算法
    Java 添加播放MIDI音乐
    Java 内存查看与分析
    总结 Eclipse 编程常用的快捷键
    Java 基础【03】序列化和反序列化
    找出给定字符串中出现最多的字符和次数
    Javascript 限制文本字节数
  • 原文地址:https://www.cnblogs.com/xiaoyucoding/p/8488679.html
Copyright © 2020-2023  润新知