JavaScriptで新年までカウントダウン

こんにちは、さるまりんです。

今日はJavaScriptでカウントダウンタイマーを作ってみました。

こんなコードです。

const newYearDate = new Date("January 1, " + (new Date().getFullYear() + 1) + " 00:00:00").getTime();
const x = setInterval(function() {
    const now = new Date().getTime();
    const distance = newYearDate - now;
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    document.getElementById("cd-txt").innerText = `新年まで${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`;
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("cd-txt").innerText = "新年おめでとうございます！";
    }
}, 1000);

1行目でいつまでカウントダウンするか、そこから下はそのタイミングまであとどれくらいの時間があるかを計算しテキストを作っています。

ページには

<span id="cd-txt"></span>

を用意し

document.getElementById("cd-txt").innerText = "テキスト";

で内容を変えています。

1行目の日時に到達するとテキストは「新年おめでとうございます！」に変わります。

このページ上で実行しています。

↓↓↓ここに表示されます↓↓↓

テキスト

↑↑↑ここに表示されます↑↑↑

今は年が明けたところなのでかなり長い間カウントダウンします。

何か特別な日のためにこれをちょっと変更して使ってみるのもいいかも。

今年もさるまりんをよろしくお願いします。

読んでくださってありがとうございました。

それではまた！