シンプルなカウントダウン効果を実現するJavaScript

この記事の例では、カウントダウン効果を実現するためのJavaScriptの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

実装のアイデア:

1. ページ上に日、時間、分、秒のラベル要素を作成し、スタイルを定義します。
2. jsは日、時間、分、秒の要素オブジェクトを取得し、後で値を割り当てることができるようにします - 残り時間
3. 現在の時刻と設定時刻の差を計算し、残りの日数、時間、分、秒をそれぞれ計算し、対応する要素コンテンツに割り当てる関数を定義します。
4. setInterval() 関数を使用して、時間差関数が 1 秒ごとに実行されるように設定します。
5. setInterval() 関数を呼び出す前に、まず時間差関数を呼び出す必要があることに注意してください。そうしないと、ページを更新すると、タグに書き込まれた元のコンテンツが表示され、その後、計算された時間差が表示されます。

コード例:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>カウントダウン効果</title>
    <スタイル>
        div {
            マージン: 200px;
        }
        
        スパン {
            表示: ブロック;
            フロート: 左;
            幅: 50px;
            高さ: 50px;
            行の高さ: 50px;
            テキスト配置: 中央;
            マージン: 5px;
            色: #fff;
            背景色: rgba(0, 0, 0, .8);
        }
    </スタイル>
</head>

<本文>
    <div class="time">
        <span class="day">0</span>
        <span>日</span>
        <span class="hour">1</span>
        <span>時間</span>
        <span class="minute">2</span>
        <span> ポイント</span>
        <span class="second">3</span>
        <span>秒</span>
    </div>
    <スクリプト>
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var 分 = document.querySelector('.minute');
        var second = document.querySelector('.second');

        var setTime = +new Date('2021-10-1 09:00:00');
        カウントダウン();
        setInterval(countDown, 1000);

        コンソールにログ出力します。

        関数 countDown() {
            var now = +新しいDate();
            var times = (setTime - 現在) / 1000;
            var d = parseInt(times / 60 / 60 / 24); //日 d = d < 10 ? '0' + d : d;
            day.innerHTML = d; // 残りの日数を日ボックスに入力します var h = parseInt(times / 60 / 60 % 24); // h = h < 10 の場合 ? '0' + h : h;
            hour.innerHTML = h; // 残り時間を時間ボックスに入力します var m = parseInt(times / 60 % 60); // 分 m = m < 10 ? '0' + m : m;
            minute.innerHTML = m; //残りをポイントボックスに分割します var s = parseInt(times % 60); //秒 s = s < 10 ? '0' + s : s;
            second.innerHTML = s; // 残りの秒数を秒ボックスに入力します}
    </スクリプト>
</本文>

</html>

注意: setInterval 関数を呼び出すときは、関数名のみを記述してください。関数内にパラメータを記述しないでください。パラメータを記述すると、関数がループ内で実行されない可能性があります。
例: setInterval(countDown, 1000);
setInterval(countDown(+new Date('2021-10-1 09:00:00')), 1000); と書いてみました。
関数 countDown(setTime) {,,,}
これを記述すると、setInterval はループ実行機能の効果が失われ、カウントダウン効果を生成できなくなります。ページが更新されるたびに 1 回だけ変更されるようになります。