核心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"属性。