【jquery插件】jq_timeGo倒计时插件
【插件功能】
jq_timeGo倒计时插件:用于团购类网站团购项目时间的倒计时。
jq_timeGo倒计时插件:用于团购类网站团购项目时间的倒计时。
【原理】
通过使用setInterval函数每秒执行个时间计算函数然后生成相应的HTML添加到页面中。
【演示地址】
www.0773linji/jquery_plugs/jq_timeGo/index.html
【插件参数】
mainSeconds: 剩余时间获取对象样式,默认.remainSeconds
mainTimeShow: 时间显示区域对象,默认.remainTime
message :时间结束后的信息显示对象,默认.message
callBackFunction :回调函数,默认空( 格式function(element,msg){} element当前对象,msg当前消息对象 )
callBackFunction :回调函数,默认空( 格式function(element,msg){} element当前对象,msg当前消息对象 )
【代码】
(function($){
//插件主要内容
$.fn.timeGo = function(options) {
var opts = $.extend({},$.fn.timeGo.defaults, options);
return this.each(function() {
$this = $(this);
var sysSecond,interValObj;
var $mainSeconds=$(opts.mainSeconds,$this);
var $mainTime=$(opts.mainTimeShow,$this);
//插件主要内容
$.fn.timeGo = function(options) {
var opts = $.extend({},$.fn.timeGo.defaults, options);
return this.each(function() {
$this = $(this);
var sysSecond,interValObj;
var $mainSeconds=$(opts.mainSeconds,$this);
var $mainTime=$(opts.mainTimeShow,$this);
var $message=$(ssage,$this);
var callBackFunction=opts.callBackFunction;
sysSecond = parseInt($mainSeconds.html());
interValObj = window.setInterval(setRemainTime, 1000);jquery框架原理
function setRemainTime()
{
if (sysSecond > 0)
{
sysSecond = sysSecond - 1;
var second = Math.floor(sysSecond % 60); // 计算秒
var minite = Math.floor((sysSecond/60) % 60); //计算分
var hour = Math.floor((sysSecond / 3600) % 24); //计算小时
var day = Math.floor((sysSecond / 3600) / 24); //计算天
if (second>=0&&second<10) {second="0"+second};
if (day>=0&&day<10) {day="0"+day};
var callBackFunction=opts.callBackFunction;
sysSecond = parseInt($mainSeconds.html());
interValObj = window.setInterval(setRemainTime, 1000);jquery框架原理
function setRemainTime()
{
if (sysSecond > 0)
{
sysSecond = sysSecond - 1;
var second = Math.floor(sysSecond % 60); // 计算秒
var minite = Math.floor((sysSecond/60) % 60); //计算分
var hour = Math.floor((sysSecond / 3600) % 24); //计算小时
var day = Math.floor((sysSecond / 3600) / 24); //计算天
if (second>=0&&second<10) {second="0"+second};
if (day>=0&&day<10) {day="0"+day};
if (hour>=0&&hour<10) {hour="0"+hour};
if (minite>=0&&minite<10) {minite="0"+minite};
$mainTime.html("<span class='day'>" + day + "</span><span class='hour'>" + hour + "</span><span class='mini'>" + minite + "</span><span class='sec'>" + second + "</span>");
}
else if (sysSecond == -1){}
else
{//剩余时间小于或等于0的时候,就停止间隔函数
window.clearInterval(interValObj);
if(typeof callBackFunction == "function")callBackFunction($this,$message);
}
}
});
if (minite>=0&&minite<10) {minite="0"+minite};
$mainTime.html("<span class='day'>" + day + "</span><span class='hour'>" + hour + "</span><span class='mini'>" + minite + "</span><span class='sec'>" + second + "</span>");
}
else if (sysSecond == -1){}
else
{//剩余时间小于或等于0的时候,就停止间隔函数
window.clearInterval(interValObj);
if(typeof callBackFunction == "function")callBackFunction($this,$message);
}
}
});
};
//插件主要内容结束
// 插件的defaults
$.fn.timeGo.defaults = {
mainSeconds:".remainSeconds",//剩余时间获取对象
mainTimeShow:".remainTime",//时间显示区域对象
message:'.message',//时间结束后的信息显示对象
callBackFunction:''
};
// 闭包结束
})(jQuery);
//插件主要内容结束
// 插件的defaults
$.fn.timeGo.defaults = {
mainSeconds:".remainSeconds",//剩余时间获取对象
mainTimeShow:".remainTime",//时间显示区域对象
message:'.message',//时间结束后的信息显示对象
callBackFunction:''
};
// 闭包结束
})(jQuery);
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论