JavaScriptで「○○まで残り○日」を計算するプログラム

この記事では、JavaScriptを使って残り日数を計算するプログラムをご紹介します。

ウェブサイトでよく見る「オリンピックまであと何日です。」といったものです。

JavaScriptで残り日数を表示するサンプルプログラムとその使用方法を説明します。

JavaScriptで残り日数を表示するプログラム

まずは、JavaScriptで残り日数を表示するプログラムをご紹介します。

以下に、HTMLとJavaScriptのコードを貼っておきます。

HTMLのサンプルコード

<p><span id="event_name"></span>まで<span id="days"></span>日</p>

JavaScriptのサンプルプログラム

// イベント名を設定する
const EVENT_NAME = "ワールドカップ";

// イベントの日付を指定する
const EVENT_DATE = "2022-11-20";

// 日付の計算
function calcDays(EVENT_DATE) {
    // 指定した日付を計算用のデータ形式に変換
    const then = new Date(EVENT_DATE);
    // 現時刻を取得
    const now = new Date();
    // 差を計算する
    const difference = Math.floor((then - now) / (1000 * 60 * 60 * 24));

    return difference;
}

// 画面表示
document.getElementById("event_name").innerText = EVENT_NAME;
document.getElementById("days").innerText = calcDays(EVENT_DATE);

サンプルコードの実行結果

以上のサンプルコードを実行すると「ワールドカップまで◯日」と表示されます。

イベント名とその日付を指定するだけで、そのイベントまでの日付を計算して表示できるものです。

以下に、CODEPENで作ったサンプルを貼ります。

イベント名とその日付を変更すれば、結果の変化を確認できますのでぜひ試してみて下さい。

See the Pen
あと何日か？イベントカウントダウン by MacLove (@maclove1)
on CodePen.

プログラムの使用方法

このサンプルコードを使う場合は、イベント名とその日付を変更するだけで使えます。

JavaScriptプログラムの上部にある、定数EVENT_NAME に表示したいイベント名を入れます。サンプルでは「ワールドカップ」となっている所です。

次に、定数EVENT_DATE にイベントの日付を入れます。形式は、YYYY-MM-DDにして下さい。サンプルでは「2022-11-20」となっている所です。

記事は以上です。