zoukankan      html  css  js  c++  java
  • 一个最简的短信验证码倒计时例子

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

    主要用于移动端

  • 相关阅读:
    Linux下文件的压缩和解压
    Env: Linux下Source Insight安装
    [uart]2.tty和uart的函数调用流程
    [uart]stty命令使用
    腾讯云的云数据库MYSQL配置
    MySQL分支Percona
    MYSQL的历史
    MYSQL的价格
    mysql之event
    Linux下设置网卡静态ip
  • 原文地址:https://www.cnblogs.com/xiaoyucoding/p/8488679.html
Copyright © 2011-2022 走看看