基于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>
posted @ 2021-12-07 13:46  代码小伙  阅读(658)  评论(0编辑  收藏  举报