0

何時間もの検索で手ぶらになった理由がわかりません。状況は次のとおりです。私のサイトのユーザーは、イベントの開始日時を設定できます。その日付と時刻はタイムスタンプとしてデータベースに保存されます。それらのカウントダウンを表示したい。だから、私はデータベースを照会します

SELECT TIMESTAMPDIFF(SECOND, NOW(), start) 
FROM events 
WHERE eid = '110';

これは、イベントが開始するように設定されるまでの残りの秒数を返します。span私が望むのは、日数、時間数、分数、および秒数を で 出力できることだけです。

これが私がこれまでに持っているjavascriptです：

コメントを読み、さらに検索し、いくつかのことを一緒にハッキングした後、これが私の更新されたコードです。

<span id="countdown-1"><?php echo $timeToEvent; ?></span>

(「イベントまでの秒数」の値をスクリプトに取得するためのより適切な方法がある場合は、修正してください。)

secs = parseInt(document.getElementById('countdown-1').innerHTML,10);
setTimeout("countdown('countdown-1',"+secs+")", 1000);

function countdown(id, timer){
    function pad(num) {
        return num > 9 ? num : '0'+num;
    };
    timer--;
    days = Math.floor( timer / 86400 ),
    hours = Math.floor( timer / 3600 ),
    mins = Math.floor( timer / 60 ),
    secs = Math.floor( timer ),

    dd = days,
    hh = hours - days * 24,
    mm = mins - hours * 60,
    ss = secs - mins * 60;

    clock = dd + ' days ' + pad(hh) + ':' + pad(mm) + ':' + pad(ss) ;

    document.getElementById(id).innerHTML = clock;
    if ( timer > 0 ) {
        setTimeout("countdown('" + id + "'," + timer + ")", 1000);
    } else {
        window.location.reload(true);
    }
}

http://jsfiddle.net/mmJQq/

このコードは機能します。ただし、上で書いたように、php 変数$timeToEventをスクリプトに直接渡す必要があるかどうかはわかりません。JavaScriptが見たいものに変更する前に、実際の秒数が約1秒間スパンに表示されるのは少し面倒です。(ちなみに、私はこのコンテキストでの精度について過度に心配していません。時間のずれは気にしません。)

4

2 に答える 2

2

あなたは決して変わっていませんdiff。関数が実行されるたびに、同じ値のままです。関数の外側に移動diffし、関数が実行されるたびに 1000 ミリ秒 (1 秒) ずつ減分します。

  var
    diff = 3850000; // Move this outside the function so that it can be changed.
                    // If you don't, it will get reset to its original value
                    // every time updateETime runs.

function updateETime() {

  function pad(num) {
    return num > 9 ? num : '0'+num;
  };


    days = Math.floor( diff / (1000*60*60*24) ),
    hours = Math.floor( diff / (1000*60*60) ),
    mins = Math.floor( diff / (1000*60) ),
    secs = Math.floor( diff / 1000 ),

    dd = days,
    hh = hours - days * 24,
    mm = mins - hours * 60,
    ss = secs - mins * 60;

    document.getElementById("countdown_time")
        .innerHTML =
            dd + ' days ' +
            pad(hh) + ':' + //' hours ' +
            pad(mm) + ':' + //' minutes ' +
            pad(ss) ; //+ ' seconds' ;

    diff -= 1000; // Every time the function runs, subtract one second from diff.

}
setInterval(updateETime, 1000 );

http://jsfiddle.net/ZWrqB/

コメンターが指摘したように、これは完全に信頼できるわけではありませsetIntervalん. それを行うより良い方法は、カウントダウンする時間を保存し、関数が起動するたびに現在の時間からのオフセットを計算し、そのオフセットをタイマー表示に使用することです。このSOの回答は、それを行うための良い方法です: https://stackoverflow.com/a/11336046/711902

于 2013-03-14T21:15:02.413 に答える
0

時間が静的であるため、時間は静的です。

関数updateETime()では、変数diffを日、時間、分、秒に分割して表示します。しかし、diff決して変わらないので、表示も変わりません。

カウントダウンを表示したい場合は、diffを呼び出すたびにをデクリメントする必要がありますupdateETime()。

于 2013-03-14T21:13:42.280 に答える