1

我有一个网站现在可以使用倒数计时器来显示 div。它适用于 Jquery 和一个简单的 JSON 响应，如下所示：

HTML：

<div class="info-block">
                <strong class="logo"><a target="_blank" href="http://example.com">example.com</a></strong>
                <div class="date-block">
                    <span class="label">next Online experience in:</span>
                    <ul class="countdown_timer">
                        <li>
                            <span class="meta">hours</span>
                            <strong class="number"><span class="counter_h">00</span> <span class="overlay">overlay</span></strong>
                        </li>
                        <li>
                            <span class="meta">minutes</span>
                            <strong class="number"><span class="counter_m">00</span> <span class="overlay">overlay</span></strong>
                        </li>
                        <li>
                            <span class="meta">seconds</span>
                            <strong class="number"><span class="counter_s">00</span> <span class="overlay">overlay</span></strong>
                        </li>
                    </ul>
                    <div class="live_now">Live Now!</div>
                    <a target="_blank" href="http://example.com"></a>
                </div>
            </div>

Javascript：

jQuery(function() { 

  $.getQuery = function( query ) {
    query = query.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var expr = "[\\?&]"+query+"=([^&#]*)";
    var regex = new RegExp( expr );
    var results = regex.exec( window.location.href );
    if( results !== null ) {
        return results[1];
        return decodeURIComponent(results[1].replace(/\+/g, " "));
    } else {
        return false;
    }
  };


  var days, goLive, hours, intervalId, minutes, seconds;
  goLive = function() {
    $(".countdown_timer").hide();
    return $(".live_now").show();
  };
  days = void 0;
  hours = void 0;
  minutes = void 0;
  seconds = void 0;
  intervalId = void 0;
  return $.ajax({
    url: "http://example.org/script/next.json",
    dataType: "json",
    success: function(data) {
      var seconds_till;
      $("#churchonline_counter").show();
      if (typeof data.current_timestamp !== "undefined") {
        return goLive();
      } else if (typeof data.next_timestamp !== "undefined") {
        seconds_till = data.next_timestamp - (new Date().getTime() / 1000);
        hours = Math.floor((seconds_till % 86400) / 3600);
        minutes = Math.floor((seconds_till % 3600) / 60);
        seconds = Math.floor(seconds_till % 60);
        return intervalId = setInterval(function() {
          if (--seconds < 0) {
            seconds = 59;
            if (--minutes < 0) {
              minutes = 59;
              if (--hours < 0) {
                hours = 23;
              }
            }
          }
          $(".counter_h").html((hours.toString().length < 2 ? "0" + hours : hours));
          $(".counter_m").html((minutes.toString().length < 2 ? "0" + minutes : minutes));
          $(".counter_s").html((seconds.toString().length < 2 ? "0" + seconds : seconds));
          if (seconds === 0 && minutes === 0 && hours === 0) {
            goLive();
            return clearInterval(intervalId);
          }
        }, 1000);
      }
    }
  });
});

JSON：

{"next_timestamp":1356741640,"next_duration":3600,"next_title":"Title","next_description":"Description"}

我的问题是：如何让 LIVE NOW div 在 JSON 代码行中所述的“next_duration”保持活动状态？它很好地解释了 JSON，完美地倒计时，在完美的时间显示隐藏的 div，然后在我刷新时它就会下降，并且在它再次刷新倒计时计时器之前不会保持隐藏的 div。

此外，在初始倒计时和刷新页面之后，倒计时无法正常工作......每次刷新页面时它都会从 24 小时开始倒计时。它没有从中断的地方继续...？

4

1 回答 1

0

由于您使用的是 jQuery，因此我建议您使用专为此类工作而设计的jQuery Countdown 插件。它可以立即使用，并且有很多选项并且易于使用。这里有一个例子。

$(function () {
    var newYear = new Date(); 
    newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1); 
    $('#defaultCountdown').countdown({until: newYear});
});
于 2012-12-29T01:24:01.090 回答