Question

我的网站现在可以使用倒数计时器来显示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小时开始倒计时。它没有从它停止的地方起飞......？

Answer 1

由于您使用的是jQuery，我建议您使用刚刚为此类工作制作的jQuery Countdown plugin。它已经可以使用，并且有很多选项并且易于使用。 An example here

$(function () {
    var newYear = new Date(); 
    newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1); 
    $('#defaultCountdown').countdown({until: newYear});
});

在重新启动计时器之前显示Div一段时间

1 个答案: