订单截止倒计时功能优化：新增银行假期与非发货日期校验

核心调整思路如下：

• 新增可配置的非发货日期列表，支持自定义每个非发货日期需要追加的小时偏移量，可直接填入银行假期、自定义停业日期等
• 新增日期校验函数，自动匹配当前及后续待计算的日期是否命中非发货配置，命中则自动叠加对应偏移时长
• 原有周末、15点截止的逻辑完全保留，与新增的非发货日期偏移叠加生效

完整可运行代码 #

JavaScript代码 #

if (document.getElementById('countdown-timer')) {
  // 自定义非发货日期配置，date格式为YYYY-MM-DD，offset为对应追加的小时数
  const NON_DELIVERY_DATES = [
    { date: '2024-10-01', offset: 24 },
    { date: '2024-10-02', offset: 24 },
    { date: '2024-10-03', offset: 24 },
    // 按需添加银行假期、自定义非发货日期即可
  ]

  // 补0工具函数
  const pad = function(n, len) {
    var s = n.toString();
    return (new Array((len - s.length + 1)).join('0')) + s;
  };

  // 校验日期是否为非发货日期，返回对应偏移小时数
  const getNonDeliveryOffset = function(checkDate) {
    const formatDate = checkDate.toISOString().split('T')[0]
    const matched = NON_DELIVERY_DATES.find(item => item.date === formatDate)
    return matched ? matched.offset : 0
  }

  var timerRunning = setInterval(
    function countDown() {
      var target = 15; // 15点为截止时间
      var now = new Date();
      var weekday = now.getDay();

      // 原有周末偏移逻辑
      if (weekday == 5) { // 周五加72小时
        target += 72;
      }
      if (weekday == 6) { // 周六加48小时
        target += 48;
      }
      if (weekday == 0) { // 周日加24小时
        target += 24;
      }

      // 新增：计算非发货日期偏移量，累加至target
      let checkDay = new Date(now)
      // 遍历后续最多7天，检查非发货日期
      for (let i = 0; i < 7; i++) {
        checkDay.setDate(checkDay.getDate() + 1)
        target += getNonDeliveryOffset(checkDay)
      }

      // 原有倒计时计算逻辑
      var curhrs = now.getHours();
      var hrs = (target - 1) - now.getHours();
      if (hrs < 0) hrs = (23 - curhrs) + target;
      var mins = 59 - now.getMinutes();
      if (mins < 0) mins = 0;
      var secs = 59 - now.getSeconds();
      if (secs < 0) secs = 0;

      var str_hrs = pad(hrs, 2);
      var str_mins = pad(mins, 2);
      var str_secs = pad(secs, 2);

      document.getElementById('countdownhrs').innerHTML = str_hrs;
      document.getElementById('countdownmins').innerHTML = str_mins;
      document.getElementById('countdownsecs').innerHTML = str_secs;
    }, 1000
  );
}

HTML代码 #

<div id="countdown-timer" class="">
  <div class="timer-container d-flex flex-row text-center text-nowrap">
    <div class="hrs">
      <span id="countdownhrs">00</span>
      <small class="d-block">HOURS</small>
    </div>
    <div class="separator">:</div>
    <div class="mins">
      <span id="countdownmins">00</span>
      <small class="d-block">MINS</small>
    </div>
    <div class="separator">:</div>
    <div class="secs">
      <span id="countdownsecs">00</span>
      <small class="d-block">SECS</small>
    </div>
  </div>
</div>

使用说明 #

直接修改NON_DELIVERY_DATES配置项即可新增/删除非发货日期，不需要调整其他逻辑。如果需要调整偏移时长，直接修改对应配置的offset值即可。

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