轻量简洁的倒计时插件

核心JS代码

/**
 * Version  0.1
 * Author   beilika.com
 */;
(function () {
    //严格模式
    'use strict';

    //避免重复
    if (window.BlkCountDown) {
        return window.BlkCountDown
    };

    //默认配置
    var message = {
        disabled: '{number}秒后获取',
        available: '点击获取'
    };

    //核心方法
    var BlkCountDown = function (selector, param) {
        //合并默认参数配置
        var config = $.extend(message, param);
        $(selector).each(function(){
            var _this = $(this);
            setInterval(function(){
                if ('false' !== _this.attr('data-monitor')) {
                    var number = parseInt(_this.attr('data-count-down-number'));
                    if (number > 0) {
                        _this.attr('disabled','disabled');
                        _this.text(config.disabled.replace('{number}', number - 1));
                        _this.attr('data-count-down-number', number - 1);
                    } else {
                        _this.removeAttr('disabled');
                        _this.text(config.available);
                    }
                }                
            }, 1000);
        });
    }

    //挂载对象
    window.BlkCountDown = BlkCountDown;
})();

使用方法:

1.在需要监听的按钮上添加类,并设置倒计时时间为0。

<button type="button" class="blk-count-down" data-count-down-number="0">点击获取</button>

2.引入并实例化倒计时插件。

new BlkCountDown('.blk-count-down');

3.如需开始倒计时,修改按钮倒计时时间为相应数字即可。

$('.blk-count-down').attr('data-count-down-number',120);

4.如需暂时不要监听倒计时,则在按钮上添加data-monitor=”false”属性。