77 lines
3.5 KiB
JavaScript
77 lines
3.5 KiB
JavaScript
|
/**
|
|||
|
|
* 倒计时插件
|
|||
|
|
* @author Tungse
|
|||
|
|
* @param dayTag 显示天数的html
|
|||
|
|
* @param hourTag 显示小时的html
|
|||
|
|
* @param minTag 显示分钟的html
|
|||
|
|
* @param secTag 显示秒数的html
|
|||
|
|
* @param dayClass 绑定天数对应tag的ClassName
|
|||
|
|
* @param hourClass 绑定小时对应tag的ClassName
|
|||
|
|
* @param minClass 绑定分钟对应tag的ClassName
|
|||
|
|
* @param secClass 绑定秒数对应tag的ClassName
|
|||
|
|
* @param isDefault 是否使用默认tagTemp
|
|||
|
|
* @param showTemp 显示模板0：(天时分秒) 1：(时分秒)
|
|||
|
|
* @param backfun 定时完成回调
|
|||
|
|
*/
|
|||
|
|
(function ($) {
|
|||
|
|
$.fn.countdownsync = function (tagTemp, backfun) {
|
|||
|
|
var data = "";
|
|||
|
|
var _DOM = null;
|
|||
|
|
var _defaultTag = _TempTag = {
|
|||
|
|
dayTag: "<li class='countdownday'></li><li class='split'>天</li>",
|
|||
|
|
hourTag: "<li class='countdownhour'></li><li class='split'>:</li>",
|
|||
|
|
minTag: "<li class='countdownmin'></li><li class='split'>:</li>",
|
|||
|
|
secTag: "<li class='countdownsec'></li><li class='split'>:</li>",
|
|||
|
|
dayClass: ".countdownday",
|
|||
|
|
hourClass: ".countdownhour",
|
|||
|
|
minClass: ".countdownmin",
|
|||
|
|
secClass: ".countdownsec",
|
|||
|
|
isDefault: false,
|
|||
|
|
showTemp:0
|
|||
|
|
};
|
|||
|
|
var _temp = $.extend(_TempTag, tagTemp);
|
|||
|
|
var TIMER;
|
|||
|
|
createdom = function (dom) {
|
|||
|
|
_DOM = dom;
|
|||
|
|
data = Math.round($(dom).attr("data"));
|
|||
|
|
var htmlstr = (_temp.showTemp == 0 ? _temp.dayTag : "") + _temp.hourTag + _temp.minTag + _temp.secTag;
|
|||
|
|
if (_temp.isDefault) {
|
|||
|
|
htmlstr = (_temp.showTemp == 0 ? _defaultTag.dayTag : "") + _defaultTag.hourTag + _defaultTag.minTag + _defaultTag.secTag;
|
|||
|
|
htmlstr = "<ul class='countdown'>" + htmlstr + "</ul>";
|
|||
|
|
$("head").append("<style type='text/css'>.countdown {list-style:none;}.countdown li{float:left;background:#000;color:#fff;border-radius:50%;padding:10px;font-size:14px; font-weight:bold;margin:10px;}.countdown li.split{background:none;margin:10px 0;padding:10px 0;color:#000000;}</style>");
|
|||
|
|
}
|
|||
|
|
$(_DOM).html(htmlstr);
|
|||
|
|
reflash();
|
|||
|
|
};
|
|||
|
|
reflash = function () {
|
|||
|
|
var range = data,
|
|||
|
|
secday = 86400, sechour = 3600,
|
|||
|
|
days = parseInt(range / secday),
|
|||
|
|
hours = _temp.showTemp == 0 ? parseInt((range % secday) / sechour) : parseInt(range / sechour),
|
|||
|
|
min = parseInt(((range % secday) % sechour) / 60),
|
|||
|
|
sec = ((range % secday) % sechour) % 60;
|
|||
|
|
data--;
|
|||
|
|
if (range < 0) {
|
|||
|
|
window.clearInterval(TIMER); //清楚定时器
|
|||
|
|
} else {
|
|||
|
|
$(_DOM).find(_temp.dayClass).html(nol(days));
|
|||
|
|
$(_DOM).find(_temp.hourClass).html(nol(hours));
|
|||
|
|
$(_DOM).find(_temp.minClass).html(nol(min));
|
|||
|
|
$(_DOM).find(_temp.secClass).html(nol(sec));
|
|||
|
|
}
|
|||
|
|
if ((range - 1) == 0) {
|
|||
|
|
undefined == backfun ? function () { } : backfun();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
TIMER = setInterval(reflash, 1000);
|
|||
|
|
nol = function (h) {
|
|||
|
|
return h > 9 ? h : '0' + h;
|
|||
|
|
};
|
|||
|
|
return this.each(function () {
|
|||
|
|
var $box = $(this);
|
|||
|
|
createdom($box);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
})(jQuery);
|