1

現在、カウントダウン タイマーを使用して div を表示する Web サイトがあります。次のように、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"}

私の質問は、コードの JSON 行に記載されている「next_duration」の間、LIVE NOW div をアクティブに保つにはどうすればよいですか? JSON を適切に解釈し、完全にカウントダウンし、非表示の div を完璧なタイミングで表示します。その後、リフレッシュするとドロップオフし、カウントダウン タイマーを再度リフレッシュする前に非表示の div を保持しません。

さらに、最初のカウントダウンとページの更新の後、カウントダウンが正しく機能しません... ページを更新するたびに、24 時間からカウントダウンが始まります。中断したところから再開しない... ?

4

1 に答える 1

0

jQueryを使用しているので、この種の作業用に作成されたjQueryCountdownプラグインを使用することをお勧めします。すぐに使用でき、多くのオプションがあり、使いやすいです。ここに例があります。

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