基於jquery的countdown外掛實現毫秒倒計時
阿新 • • 發佈:2021-12-07
原版的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>