0

こんにちは、単一の HTML ページに複数の JavaScript カウントダウンを追加しようとしています。以下の .js ファイルを含めました。現在、私のページには最初のカウントダウンのみが表示されます。

function cdtd () {
    var end = new Date("December 25, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('cdtd()',1000);

}

function countdown () {
    var end = new Date("May 31, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('countdown()',1000);

}

function cdtd3 () {
    var end = new Date("December 25, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('cdtd3()',1000);

}

function cdtd4 () {
    var end = new Date("December 25, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('cdtd4()',1000);

}

function cdtd5 () {
    var end = new Date("December 25, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('cdtd5()',1000);

}

function cdtd6 () {
    var end = new Date("December 25, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('cdtd6()',1000);

}
4

3 に答える 3

1

ここで修正する必要があるいくつかの問題があります。

  1. 各カウントダウン タイマーは、時間文字列を格納するときに同じ要素 ID を使用します。そのため、そのうちの 1 つだけが表示されます。

  2. カウントダウンのいずれかがゼロになると、document.write()呼び出しによってページ全体が消去されます。

  3. コードは何度も繰り返されます。これは、すべてのカウントダウンに共通する 1 つの関数である必要があります。(もう 1 つ追加する必要がある場合はどうすればよいですか? さらに 10 を追加しますか?)

  4. 複数のタイマーが機能しますが、それらは必要ありません。単一のタイマーを実行し、そこから表示されているすべての時間を更新します。

  5. を呼び出すときsetInterval()は、文字列ではなく、関数参照を最初のパラメーターとして渡す方が適切です。

それらのアイデアを検討し、思いつくものを確認してから、新しいコードを報告してください。:-)

于 2013-05-23T17:14:09.870 に答える
0

現在、関数を呼び出すたびに各値を上書きする 1 つのボックスを参照しています。

getElementById の代わりにクエリ セレクタを使用したい。

jQuery を使用した簡単な例を次に示します。

var cdtd = function(id,end) {
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
            clearTimeout (timer);
            document.write("Deal Ended");
    }

    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %= 60;
    $( id + " .days").html(days);
    $( id + " .hours").html(hours);
    $( id + " .minutes").html( minutes);
    $( id + " .seconds").html( seconds );
    console.log(id + " .hoursBox",$( id + " .hoursBox").length,id,end,hours,minutes,seconds)
    var timer = setTimeout(function(){cdtd(id,end)},1000);
}
cdtd("#counter1",new Date("December 25, 2014 00:01:00"));
cdtd("#counter2",new Date("October 31, 2014 00:01:00"));
cdtd("#counter3",new Date("January 1, 2014 00:01:00"));

http://plnkr.co/8LrtWvfGnZWyRYl2RlWd

于 2013-05-23T17:14:08.130 に答える
0

@Shanimal imは私のウェブサイトでこのコードを使用しました。問題は、タイマーが0000に達したときに別のページに移動し、取引が終了したことを示していることです。タイマーが0000に達したときに、特定のdivの同じページにメッセージを表示する必要があります。別のページに移動します。if (timeDiff <= 0) { clearTimeout (timer); を削除してみました。document.write("取引終了"); }

0000 になっても何のメッセージも表示されません -1 - 1 -1 -1 から再びカウントを開始します

于 2014-03-06T15:05:55.977 に答える