0

カウントダウンタイマーを作成し、これをHTMLとCSSでコーディングしましたが、jQueryを使用して機能させることができませんでした。このカウントダウンをどのように機能化できますか？カウントダウンを好むHTML構造は次のとおりです。

    <div id="counter-container">
      <div class="counter-box">
        <div class="counter"><p class="counter-p">#</p></div>
        <p class="counter-box-p">days</p>
      </div>
      <div class="counter-box">
        <div class="counter"><p class="counter-p">#</p></div>
        <p class="counter-box-p">hours</p>
      </div>
      <div class="counter-box">
        <div class="counter"><p class="counter-p">#</p></div>
        <p class="counter-box-p">minutes</p>
      </div>
      <div class="counter-box">
        <div class="counter"><p class="counter-p">#</p></div>
        <p class="counter-box-p">seconds</p>
      </div>

ご覧のとおり、私はすでに数日、数時間などの段落要素を追加しているので、jQueryを介して余分なテキストを埋め込みたくありません。

PS誰かが新しいカウントダウンの日付を設定する方法を教えてもらえますか？

4

1 に答える 1

4 
function counter(count) {
  countdown = setInterval(function(){
    var temp;
    $("p#d").html(Math.floor(count/(60*60*24)));
    temp = count%(60*60*24);
    $("p#h").html(Math.floor(temp/(60*60)));
    temp = count%(60*60);
    $("p#m").html(Math.floor(temp/(60)));
    temp = count%(60);
    $("p#s").html(temp);
    if (count == 0) {
         alert("time's up");
         clearInterval(countdown);       
    }
    count--;
  }, 1000);
}

counter(60*60*24*2);

<ahref = "http://jsfiddle.net/NfLAB/"rel="nofollow">デモ

編集-1：

カウンターは秒単位で時間を取得します。

counter(10); //10 seconds
counter(10*60) //600 seconds -> 10 minutes.
counter(10*60*60) //36000 seconds -> 600 minutes -> 10 hour

編集-2：

Dateベースで動作させたい場合は、次のように機能を変更する必要があります。

function counter(futureDate) {
  var today = new Date(); // today
  count = Math.floor((futureDate-today)/1000);
  countdown = setInterval(function(){
    var temp;
    $("p#d").html(Math.floor(count/(60*60*24)));
    temp = count%(60*60*24);
    $("p#h").html(Math.floor(temp/(60*60)));
    temp = count%(60*60);
    $("p#m").html(Math.floor(temp/(60)));
    temp = count%(60);
    $("p#s").html(temp);
    if (count == 0) {
         alert("time's up");
         clearInterval(countdown);       
    }
    count--;
  }, 1000);
}

counter(new Date(2012,4,8)); // May 8, 2012 00:00:00
/* counter(new Date(2012,4,8,15,49,10)); // May 8, 2012 15:49:00 */
​

http://jsfiddle.net/NfLAB/1/

于 2012-04-06T21:40:12.933 に答える