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