javascript - 倒数计时器重置转换

Question

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

这可以在这里工作:

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

完整代码如下:

(先是 CSS，然后是下面的 HTML - 请注意代码片段不会在此处运行)

/* 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。

fiddle :https://jsfiddle.net/km047ryb/

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