Question

I'm using a countdown timer script that I've come across online and modified slightly to suit my website. This works perfectly for counting down to a set date/time but I need the timer to reset back to a 24 hour countdown when it reaches 00:00 every day. This is for a website which counts down how long is left for free shipping on products.

This can be seen working here:

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

Here's the full code:

(CSS then HTML below - Please note the snippet doesn't run on here)

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

My query is whether this requires a small amount of code within the jQuery or whether it requires a re-write of the main script? Is there a small function I could include to change this to a reset counter?

Thank you for your input.

Answer 1

您需要做的就是添加以下行：

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

计算出长变量列表之后

如果剩下0小时0分钟，则将小时数重设为24。

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

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

Countdown Timer Reset Conversion

1 个答案: