倒数计时器复位转换

Question

我正在使用一个倒数计时器脚本，该脚本是我在网上遇到的，并稍作修改以适合我的网站。这非常适合倒计时到设定的日期/时间，但我需要计时器在每天到达 00:00 时重置为 24 小时倒计时。这适用于一个网站，它会倒计时产品免费送货的剩余时间。

这可以在这里看到：

https://zoeyplayground-com.zoeysite.com/countdown

这是完整的代码：

（下面是 CSS 然后是 HTML - 请注意 sn-p 不在此处运行）

/* Countdown Timer Start */

#countdown {
  list-style: none;
  padding: 0;
  display: block;
  text-align: center;
}
#countdown li {
  display: inline-block;
}
#countdown li span {
  font-size: 30px;
  font-weight: 300;
  line-height: 30px;
}
#countdown .seperator {
  font-size: 30px;
  line-height: 20px;
  vertical-align: top;
}
#countdown li p {
  color: #a7abb1;
  font-size: 16px;
}
/* Countdown Timer End */

<!-- Countdown Timer Start -->

<script>
  ! function(t) {
    t.fn.countdown = function(e, n) {
      function o() {
        var t = new Date(r.date),
          e = s(),
          o = t - e;
        if (0 > o) return clearInterval(d), void(n && "function" == typeof n && n());
        var a = 1e3,
          f = 60 * a,
          u = 60 * f,
          l = 24 * u,
          c = Math.floor(o / l),
          h = Math.floor(o % l / u),
          x = Math.floor(o % u / f),
          g = Math.floor(o % f / a),
          y = 1 === c ? r.day : r.days,
          m = 1 === h ? r.hour : r.hours,
          v = 1 === x ? r.minute : r.minutes,
          D = 1 === g ? r.second : r.seconds;
        c = String(c).length >= 2 ? c : "0" + c, h = String(h).length >= 2 ? h : "0" + h, x = String(x).length >= 2 ? x : "0" + x, g = String(g).length >= 2 ? g : "0" + g, i.find(".days").text(c), i.find(".hours").text(h), i.find(".minutes").text(x), i.find(".seconds").text(g), i.find(".days_text").text(y), i.find(".hours_text").text(m), i.find(".minutes_text").text(v), i.find(".seconds_text").text(D)
      }
      var r = t.extend({
        date: null,
        offset: null,
        day: "Day",
        days: "Days",
        hour: "Hour",
        hours: "Hours",
        minute: "Minute",
        minutes: "Minutes",
        second: "Second",
        seconds: "Seconds"
      }, e);
      r.date || t.error("Date is not defined."), Date.parse(r.date) || t.error("Incorrect date format, it should look like this, 12/24/2012 12:00:00.");
      var i = this,
        s = function() {
          var t = new Date,
            e = t.getTime() + 6e4 * t.getTimezoneOffset(),
            n = new Date(e + 36e5 * r.offset);
          return n
        },
        d = setInterval(o, 1e3)
    }
  }(jQuery);
</script>

<script>
  jQuery('#countdown').countdown({
    date: '04/15/2016 21:00:00'
  });
</script>

<!-- Countdown Timer End -->

<!-- Countdown Timer Content Start -->

<ul id="countdown">
  <li><span class="hours">00&nbsp;</span>
    <p class="hours_text">Hours</p>
  </li>
  <li class="seperator">:</li>
  <li><span class="minutes">00</span>
    <p class="minutes_text">Minutes</p>
  </li>
</ul>

<!-- Countdown Timer Content End -->

我的问题是这是否需要 jQuery 中的少量代码，或者是否需要重写主脚本？我可以包含一个小功能来将其更改为重置计数器吗？

感谢您的意见。

Answer 1

你需要做的就是添加这一行：

if(h == 0 && x == 0) {
    h = 24;
}

在计算出长长的变量列表之后。

如果还剩 0 小时 0 分钟，则将小时重置为 24。

小提琴：https://jsfiddle.net/km047ryb/

如果您有任何问题，请发表评论。