/*******************************************************************************
* @author caihaibin <243008827@qq.com>
* @version 1.1.1
*******************************************************************************/
(function($) {
function getTxt(target) {
if($(target).prop("tagName") == 'INPUT') {
return $(target).val();
} else {
return $(target).html();
}
}
/**
* 根据按钮类型,自动识别文本字段来自value还是html
* @param {targetect} target
*/
function setTxt(target, txt) {
if($(target).prop("tagName") == 'INPUT') {
//恢复文本
$(target).val(txt);
} else {
//恢复文本
$(target).html(txt);
}
}
/**
* 停止计时器
*/
function stop(target) {
//恢复按键文本
setTxt(target, $.data(target, 'countdown').data.text);
//恢复点击
$(target).removeAttr('disabled');
//清除计时器对象
clearInterval($.data(target, 'countdown').data.time_id);
}
function bindEvents(target) {
//绑定点击事件
//click.xxx为命名空间形式,可以通过unbind('.xxx')一次性解除所有该命名空间下的绑定
//取消原".countdown"命名空间下,所有绑定事件
$(target).unbind('.countdown');
//直接绑定新事件
$(target).bind('click.countdown', function() {
var time = $.data(target, 'countdown').options.time;
//禁止二次点击
$(target).attr('disabled', 'disabled');
//获取计时器标志(int类型)
var time_id = setInterval(function() {
if(time <= 0) {
//统一调用计时器插件结束动作
$(target).countdown('stop');
$.data(target, 'countdown').options.onEnd();
return;
}
$.data(target, 'countdown').options.onShowtime(target, time, time + '秒');
//显示倒计时结果
setTxt(target, time + '秒');
time--;
}, 1000);
//记录计时器标志到对象数据中,用于计时结束时,clear动作
$.data(target, 'countdown').data.time_id = time_id;
});
}
/**
* 初始化计时器插件
* @param {Object} options
*/
function create(target) {}
/**
* parse options from markup.
*/
function parseOptions(target) {
var t = $(target);
return $.extend({}, {
//如果参数内容为空或undefined,不会覆盖前面的内容.如果有值,依次会覆盖前面数组的具体键值
time: t.attr('time') ? t.attr('time') : undefined
});
}
$.fn.countdown = function(options, param) {
if(typeof options == 'string') {
var method = $.fn.countdown.methods[options];
if(method) {
return method(this, param);
}
$.error('Method ' + options + ' does not exist on jQuery.countdown');
}
options = options || {};
return this.each(function() {
//实现针对每元素级的函数和变量
var state = $.data(this, 'countdown');
if(state) {
//二次初始化,只覆盖变量,重新绑定事件等..
$.extend(state.options, options);
} else {
state = $.data(this, 'countdown', {
//该对象所有选项,包括配置参数,传入配置,都存放在options
//如果参数内容为空或undefined,不会覆盖前面的内容.如果有值,依次会覆盖前面数组的具体键值
options: $.extend({}, $.fn.countdown.defaults, parseOptions(this), options),
//该对象所有临时变量
data: {
//按钮文本内容,用于复原
text: getTxt(this),
//计时器标志,用于clear时,触发
time_id: 0
}
});
}
//创建元素,只针对元素部分的调整.需要区分事件和元素的操作
create(this);
//绑定相关事件,可重复绑定;重复绑定时,通过事件命名空间进行解除
bindEvents(this);
});
};
//开放给外部调用动作
//注:函数内部需要二次调用闭包中所定义函数,jq对象为数组,请求的闭包中的函数动作是单体.
$.fn.countdown.methods = {
//解析出参数配置
parseOptions: function(jq) {
//参数只需要一份,列表对象中参数相同,所以只需要返回首个
return parseOptions(jq[0]);
},
//返回所配置参数
options: function(jq) {
//参数只需要一份,列表对象中参数相同,所以只需要返回首个
return $.data(jq[0], 'countdown').options;
},
//停止计时动作
stop: function(jq) {
return jq.each(function() {
stop(this);
});
}
};
//外部参数配置,允许参数和函数事件等
$.fn.countdown.defaults = {
/**
* 默认时长
*/
time: 60,
/**
* 计时事件
* @param {Object} target
* @param {Object} time 当前秒数
* @param {Object} txt 秒数文本
*/
onShowtime: function(target, time, txt) {},
/**
* 结束事件
* @param {Object} target
*/
onEnd: function(target) {}
};
})(jQuery);
<!DOCTYPE html>
<html>
<head>
<title>计时器测试</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery.countdown.js"></script>
</head>
<body>
<button time="3">3秒倒计时</button>
<button onclick="$('button[time]').countdown('stop')">取消倒计时</button>
<input type="button" value="60秒倒计时">
<button onclick="$('input[type=button]').countdown('stop')">取消倒计时</button>
<a time="3">a倒计时</a>
<script>
$(function() {
$('input[time],button[time]').countdown({
onShowtime: function(target, time, txt) {
console.log(time, txt);
},
onEnd: function(target) {
console.log('end');
}
});
$('a[time]').countdown();
// $('a,button,input').css('pointer-events', 'none');
})
</script>
</body>
</html>