Code666 (代码贴、代码片段)

[JavaScript] jquery倒计时插件源代码 →→→→→进入此内容的聊天室

来自 , 2019-09-26, 写在 JavaScript, 查看 103 次.
URL http://www.code666.cn/view/7873b66c
  1. !function ($) {
  2.     $.fn.countDown = function (options) {
  3.         // 设置默认属性
  4.         var settings = {
  5.                 "startTime":0,
  6.                 "endTime":this.attr('data-end') || 0,
  7.                 "nowTime":0,
  8.                 "interval":1000,
  9.                 "minDigit":true,
  10.                 "showDay":true,
  11.                 "timeUnitCls":{
  12.                     "day":'m-d',
  13.                     "hour":'m-h',
  14.                     "min":'m-m',
  15.                     "sec":'m-s'
  16.                 },
  17.                 "startTips":'',
  18.                 "endTips":'',
  19.                 "stopTips":'',
  20.                 "timeStamp":true
  21.             },
  22.             opts = $.extend({}, settings, options);
  23.  
  24.         return this.each(function () {
  25.             var $timer = null,
  26.                 $this = $(this),
  27.                 $block = $('<span></span>'),
  28.                 nowTime,
  29.             // 匹配时间
  30.                 startTime = isNaN(opts.startTime) ? (Date.parse(opts.startTime.replace(/-/g, '/')) / 1000) : Math.round(opts.startTime),
  31.                 endTime = isNaN(opts.endTime) ? (Date.parse(opts.endTime.replace(/-/g, '/')) / 1000) : Math.round(opts.endTime);
  32.  
  33.             // 判断当前时间
  34.             nowTime = opts.nowTime === 0 ? Math.round(new Date().getTime() / 1000) : Math.round(opts.nowTime);
  35.  
  36.             // 补零方法
  37.             function addZero(isAdd, time) {
  38.                 if (!isAdd) return time;
  39.                 else return time < 10 ? time = '0' + time : time;
  40.             }
  41.  
  42.             // 天、时、分、秒
  43.             var timeStamp = {"day":'', "hour":'', "min":'', "sec":''};
  44.             if (opts.timeStamp) timeStamp = {"day":'天', "hour":'时', "min":'分', "sec":'秒'};
  45.  
  46.             (function remainTime() {
  47.                 var time = {},
  48.                     seconds,
  49.                     word = '';
  50.  
  51.                 // 获取需要计时的毫秒数
  52.                 seconds = nowTime < startTime ? startTime - nowTime : endTime - nowTime;
  53.                 $this.html('');
  54.  
  55.                 // 是否显示天数
  56.                 if (opts.showDay) {
  57.                     time.day = addZero(opts.minDigit, Math.floor(seconds / 3600 / 24));
  58.                     time.hour = addZero(opts.minDigit, Math.floor(seconds / 3600 % 24));
  59.                 } else {
  60.                     time.hour = addZero(opts.minDigit, Math.floor(seconds / 3600));
  61.                 }
  62.                 time.min = addZero(opts.minDigit, Math.floor(seconds / 60 % 60));
  63.                 time.sec = addZero(opts.minDigit, Math.floor(seconds % 60));
  64.  
  65.                 // 活动开始倒计时
  66.                 if (nowTime < startTime) {
  67.                     if (opts.startTips) word = opts.startTips;
  68.                 } else {
  69.                     // 活动结束倒计时
  70.                     if (endTime > nowTime) {
  71.                         if (opts.endTips) word = opts.endTips;
  72.                     }// 倒计时停止
  73.                     else {
  74.                         if (opts.stopTips) {
  75.                             word = opts.stopTips;
  76.                             $this.html(word);
  77.                         } else {
  78.  
  79.                             for (var i in time) {
  80.                                 if (i == 'day' && !opts.showDay) continue;
  81.                                 time[i] = 0;  // 时间置0
  82.                                 $block.clone().addClass(opts.timeUnitCls[i]).text(time[i] + timeStamp[i]).appendTo($this);
  83.                             }
  84.                         }
  85.                         clearTimeout($timer);
  86.                         return false;
  87.                     }
  88.                 }
  89.  
  90.                 // 写入
  91.                 $this.html(word);
  92.                 for (var i in time) {
  93.                     if (i == 'day' && !opts.showDay) continue;
  94.                     $block.clone().addClass(opts.timeUnitCls[i]).text(time[i] + timeStamp[i]).appendTo($this);
  95.                 }
  96.  
  97.                 // 累加时间
  98.                 nowTime = nowTime + opts.interval / 1000;
  99.  
  100.                 // 循环调用
  101.                 $timer = setTimeout(function () {
  102.                     remainTime();
  103.                 }, opts.interval);
  104.             })();
  105.         });
  106.     }
  107. }(jQuery);
  108. //javascript/5713

回复 "jquery倒计时插件源代码"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666