基于jquery的countdown插件实现毫秒倒计时
原版的jQuery组件只支持到秒级,现做了改动,已经支持到毫秒级,改完以后的js代码如下
/**
* 倒计时插件
* @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 msecClass 绑定毫秒数对应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>",
msecTag: "<li class='countdownmsec'></li><li class='split'>:</li>",
dayClass: ".countdownday",
hourClass: ".countdownhour",
minClass: ".countdownmin",
secClass: ".countdownsec",
msecClass: ".countdownmsec",
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 + _temp.msecTag;
if (_temp.isDefault) {
htmlstr = (_temp.showTemp == 0 ? _defaultTag.dayTag : "") + _defaultTag.hourTag + _defaultTag.minTag + _defaultTag.secTag + _defaultTag.msecTag;
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,
msecday = 86400000,
msechour = 3600000,
msemin = 60000,
msecsec = 1000,
days = parseInt(range / msecday),
hours = parseInt((range - days * msecday) / msechour),
min = parseInt((range - days * msecday - hours * msechour) / msemin),
sec = parseInt((range - days * msecday - hours * msechour - min * msemin) / msecsec),
msec = range - days * msecday - hours * msechour - min * msemin - sec * msecsec;
data = data - 20;
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));
$(_DOM).find(_temp.msecClass).html(mnol(msec));
}
if ((range - 1) == 0) {
undefined == backfun ? function () { } : backfun();
}
};
TIMER = setInterval(reflash, 20);
nol = function (h) {
return h > 9 ? h : '0' + h;
};
// 毫秒处理
mnol = function (h) {
if(h <= 9) {
return '00' + h
} else if((h > 9) && (h <= 99)) {
return '0' + h
} else {
return h
}
}
return this.each(function () {
var $box = $(this);
createdom($box);
});
};
})(jQuery);
使用如下方式调用
<!-- data里写毫秒数 900000就是15分钟 -->
<span class="countdownWin" data="900000"></span>
<script>
$('.countdownWin').countdownsync({
dayTag: "",
hourTag: "<label class='tt hh dib vam'>00</label><span>:</span>",
minTag: "<label class='tt mm dib vam'>00</label><span>:</span>",
secTag: "<label class='tt ss dib vam'>00</label><span>:</span>",
msecTag: "<label class='tt ms dib vam'>000</label><span></span>",
dayClass: ".dd",
hourClass: ".hh",
minClass: ".mm",
secClass: ".ss",
msecClass: '.ms',
isDefault: false,
showTemp:1
}, function () {
});
</script>