0

動的なカウントダウンを表示する必要があるhtmlファイルに複数の段落があります。そこで、javascriptでカウントダウン関数を作成しました。この関数は、呼び出されるたびに残り時間を返します。残念ながら、htmlファイルでこの関数を毎秒呼び出す方法がわかりません。手伝ってくれませんか。

これは私のhtmlファイルがどのように見えるかです： 編集、私は私のhtmlファイルに多くのカウントダウン段落を持っています！：

<p class="countdown"><script>document.write(CountdownAnzeigen('2012-07-16 12:20:00'));</script></p>
<p class="countdown"><script>document.write(CountdownAnzeigen('2012-08-10 10:10:00'));</script></p>
...

javascript関数は次のようになります。

function CountdownAnzeigen(end_datetime){
    var Now = new Date();
    var Countdown = Date.parse(end_datetime);
    var CountdownText = Countdown.getTime()-Now.getTime();
    return CountdownText;
}
4

5 に答える 5

1 
setInterval(function() {
    CountdownAnzeigen('2012-07-16 12:20:00');
}, 1000);
于 2012-07-11T19:00:43.057 に答える
1

このsetInterval(foobar, x)関数は、ミリ秒foobarごとに関数を実行するために使用されます。x

実行するfoobar関数でも、Javascriptとして解釈される文字列でもかまいませんが、文字列の方法論を使用することは悪い習慣であると私は信じています。

MDNsetIntervalドキュメントを参照してください。

（setIntervalの姉妹メソッドsetTimeoutのドキュメントも参照してください。）

于 2012-07-11T19:04:14.240 に答える
1

属性を使用data-して、ターゲット時間を各要素に関連付けます。

<p class="countdown" data-target-time="2012-07-06 12:20:00"></p>
<p class="countdown" data-target-time="2012-08-10 10:10:00"></p>

次に、単一のsetInterval関数を使用して、クラス化された各countdown要素に、関連する時間データのカウントダウン関数の結果を入力します。

setTimeout(function() {
    var countdowns = document.getElementsByClassName("countdown");
    for(var i=0; i < countdowns.length; ++i) {
        var cd = countdowns[i];
        cd.innerHTML = CountdownAnzeigen(cd.getAttribute("data-target-time"));
    }
}, 1000);

これにより、完全に有効なHTML5が作成され、古いブラウザでも正しく機能します。

于 2012-07-11T19:58:47.133 に答える
0

setTimeout（）を介して定期的に関数を呼び出すこともできます。

例：

javascript 

function CountdownAnzeigen(countdown){
    document.getElementById('countdown').innerHTML = countdown--;
    if (countdown>0) {
       window.setTimeout(function(){CountdownAnzeigen(countdown);}, 1000);
    } else { alert('The End');}
}

html 

<input type="button" value="count down" onclick="CountdownAnzeigen(10)"/>
<div id="countdown"></div>
于 2012-07-11T19:28:37.067 に答える
0

使用方法に関するすべての回答に加えてsetInterval()、結果を段落に取り込む方法については誰も説明していません。:)

繰り返しになりますが、次のように関数を呼び出します。

setInterval(function() { CountdownAnzeigen('2012-07-16 12:20:00'); }, 1000);

そして、関数を更新します。

// remove return value
return CountdownText;

// and replace it with this
document.getElementById('countdown').innerHTML = CountdownText;

最後に、HTMLを次のように変更します。

<p class="countdown" id="countdown"></p>

「onload」ハンドラーを使用しない場合は、すべてのJavaScriptを段落の下に配置し、関数を手動で1回呼び出して、1秒後の最初の時刻ではなく、すぐに開始時刻を設定します。

編集

複数の段落がある場合は、次のように実行できます。

<p class="countdown" id="countdown_1"></p>
<p class="countdown" id="countdown_2"></p>

<script>
    setInterval(function() { CountdownAnzeigen('countdown_1', '2012-07-16 12:20:00'); }, 1000)
    setInterval(function() { CountdownAnzeigen('countdown_2', '2012-07-16 12:20:00'); }, 500)
</script>

そして、関数を次のように更新します。

document.getElementById(id).innerHTML = a;

ìd関数呼び出しからの新しいパラメーターはどこにありますか。

于 2012-07-11T19:29:17.800 に答える