jQuery countdown倒计时插件运行异常秒数为0，该如何排查解决？

你使用的jquery.countdown.js源码存在多处核心逻辑缺失和错误，才导致倒计时无法正常工作，按以下步骤调整即可：

1. 现存核心错误 #

• getDateData函数逻辑不完整：计算出时间差diff后，没有把diff换算成对应的年/天/时/分/秒，反而直接写死了固定的时间数值，同时函数没有返回dateData对象
• 缺少核心依赖方法：没有定义倒计时显示需要的leadingZeros补零方法，也没有定义代码中调用的stop停止倒计时方法
• 默认目标日期已过期：默认配置的目标日期是2021年12月25日，当前时间已经晚于该日期，会直接触发结束逻辑，倒计时停在0
• 语法与调用逻辑错误：getDateData函数没有闭合大括号，render方法调用时没有传入计算好的时间数据

2. 具体修改步骤 #

步骤1：补全getDateData的时间换算逻辑，增加返回值 #

把写死的dateData替换为用diff计算的动态值：

this.getDateData = function() {
  var dateData, diff;
  var endDate = Date.parse($.isPlainObject(_this.options.date) ? _this.options.date : new Date(_this.options.date));
  diff = (endDate - Date.parse(new Date())) / 1000;
  if (diff <= 0) {
    diff = 0;
    if (_this.interval) {
      _this.stop();
    }
    _this.options.onEnd.apply(_this);
  }
  // 把时间差换算为年/天/时/分/秒
  dateData = {
    years: Math.floor(diff / (365 * 24 * 60 * 60)),
    days: Math.floor(diff / (24 * 60 * 60) % 365),
    hours: Math.floor(diff / (60 * 60) % 24),
    min: Math.floor(diff / 60 % 60),
    sec: Math.floor(diff % 60),
    millisec: Math.floor((diff % 1) * 1000)
  };
  return dateData;
};

步骤2：增加缺失的公共方法 #

在init方法前增加leadingZeros补零方法和stop停止方法：

// 数字补零方法，用于统一显示两位时间
this.leadingZeros = function(num, length) {
  length = length || 2;
  return num.toString().padStart(length, '0');
};
// 停止倒计时方法
this.stop = function() {
  clearInterval(_this.interval);
  _this.interval = null;
};

步骤3：修正render方法的调用逻辑 #

原render方法没有传入计算好的时间数据，修改实现：

this.render = function() {
  var dateData = _this.getDateData();
  return _this.options.render.call(_this, dateData);
};

步骤4：初始化时传入目标上线日期 #

调用倒计时组件时传入你的实际上线时间即可：

$('.countdown.styled').countdown({
  date: "Dec 31, 2024 23:59:59" // 替换为你的站点实际上线日期
});

3. 修复后完整可运行代码 #

(function() {
  (function($) {
    $.countdown = function(el, options) {
      var _this = this;
      this.el = el;
      this.$el = $(el);
      this.$el.data("countdown", this);
      
      // 补零方法
      this.leadingZeros = function(num, length) {
        length = length || 2;
        return num.toString().padStart(length, '0');
      };
      
      // 停止倒计时方法
      this.stop = function() {
        clearInterval(_this.interval);
        _this.interval = null;
      };
      
      // 时间差计算方法
      this.getDateData = function() {
        var dateData, diff;
        var endDate = Date.parse($.isPlainObject(_this.options.date) ? _this.options.date : new Date(_this.options.date));
        diff = (endDate - Date.parse(new Date())) / 1000;
        if (diff <= 0) {
          diff = 0;
          if (_this.interval) {
            _this.stop();
          }
          _this.options.onEnd.apply(_this);
        }
        dateData = {
          years: Math.floor(diff / (365 * 24 * 60 * 60)),
          days: Math.floor(diff / (24 * 60 * 60) % 365),
          hours: Math.floor(diff / (60 * 60) % 24),
          min: Math.floor(diff / 60 % 60),
          sec: Math.floor(diff % 60),
          millisec: Math.floor((diff % 1) * 1000)
        };
        return dateData;
      };
      
      this.render = function() {
        var dateData = _this.getDateData();
        return _this.options.render.call(_this, dateData);
      };
      
      this.init = function() {
        _this.options = $.extend({}, $.countdown.defaultOptions, options);
        if (_this.options.refresh) {
          _this.interval = setInterval(function() {
            return _this.render();
          }, _this.options.refresh);
        }
        _this.render();
        return _this;
      };

      this.init();
    };
    
    $.countdown.defaultOptions = {
      date: "Dec 25, 2024 15:03:25", // 默认日期修改为未过期时间
      refresh: 1000,
      onEnd: $.noop,
      render: function(date) {
        return $(this.el).html("" + date.years + " 年, " + date.days + " 天, " + (this.leadingZeros(date.hours)) + " 小时, " + (this.leadingZeros(date.min)) + " 分 " + (this.leadingZeros(date.sec)) + " 秒");
      }
    };
    
    $.fn.countdown = function(options) {
      return $.each(this, function(i, el) {
        var $el = $(el);
        if (!$el.data('countdown')) {
          return $el.data('countdown', new $.countdown(el, options));
        }
      });
    };
    return void 0;
  })(jQuery);
}).call(this);

内容的提问来源于stack exchange，提问作者Gopinath R