[カウントダウンタイマー表示]指定の日時以降に内容を変更させる[JavaScript]

指定した日時の前後で内容を変更させるシンプルなコードです。
変更されるまでの時間を表示するカウントダウンタイマーを合わせて表示します。

使用デモ

年が変わるまでです。

あけましておめでとうございます！

*上記のみだと実際に変更されるかわかりませんよね。
ということで以下で目標時間を変更できるようにしました！

「セットする」を押すと、設定日時を入力した日時に変更できます。
(何も入力しないでセットするとエラーになります。)

実装方法

• 以下のJavaScriptの「目標時間」と「完了した時に行う処理」を編集して設置。
• HTMLで以下のようにIDに「display-time」を設定した要素内にカウントダウンが表示される。

<span id="display-time"></span>

JavaScript

<script>
const targetTime = (new Date('2021-12-31T24:00:00')).getTime(); // 目標時間(*1)

// 完了した時に行う処理。(*2)
function complate() {
    const beforeEl = document.getElementById('before');
    const afterEl = document.getElementById('after');
    beforeEl.style.display = 'none';
    afterEl.style.display = 'block';
}

let displayTime = document.createTextNode('');

let firstFlag = false;
let complateFlag = false;
function timeConverter() {
    currentTime = Date.now();
    remainingTime = Math.ceil((targetTime - currentTime) / 1000);

    if (remainingTime <= 0) {
        complate();
        complateFlag = true;
    } else {
        day = Math.floor(remainingTime / 60 / 60 / 24);
        hour = ('00' + Math.floor(remainingTime / 60 / 60) % 24).slice(-2);
        min = ('00' + Math.floor(remainingTime / 60) % 60).slice(-2);
        sec = ('00' + Math.floor(remainingTime % 60)).slice(-2);

        resultTime = day + '日' + hour + ':' + min + ':' + sec; // タイマー表示方法(*3)
        displayTime.nodeValue = resultTime;

        if (firstFlag == false) {
            firstFlag = true;
            timeout = setTimeout(function timeout() {
                timeConverter();
                if (complateFlag == false) {
                    setTimeout(timeout, 1000 - currentTime % 1000);
                }
            }, 1000 - currentTime % 1000);
        }
    }
}

timeConverter();

const timeEl = document.getElementById('display-time');
timeEl.appendChild(displayTime);
</script>

1. new Date(' ここに入力 ')に目標の日時を設定。
2. 今回は以下のようなHTMLでID「before」を非表示にし、ID「after」を表示している。
   

   <p id="before">年が変わるまで<span id="display-time"></span>です。</p>
   <p id="after" style="display:none;">あけましておめでとうございます！</p>

3. 例えば以下のようにすると「○年○月○日○時○分○秒」と表示できる。
   

   resultTime = day + '日' + hour + '時' + min + '分' + sec + '秒';

まとめ

以上で完成です！
期間限定で何かを表示する時やカウントダウンでサイトを表示する時などに活躍してくれます。

ちなみに、JavaScriptはクライアントサイドで操作が可能です。
やろうと思えば目標時間後に表示される内容などを覗き見るなどの事は簡単にできてしまいます。
（カウントダウンサイト公開前に内容をバラされるなどはよくありましたよね。）

PHPなどのサーバーサイドと組み合わせることで、これらを回避することも可能です。
公開情報の重要度に合わせて実装することが大事ですね。