JavaScriptで日時を指定してHTMLタグを公開する方法

WEB制作、マーケティングに関する情報をお届けします。

JavaScriptで日時を指定してHTMLタグを公開する方法

2025.02.24

カテゴリ：WEB制作

タグ：

JavaScript

※当サイトはアフィリエイト広告を利用しています。

キャンペーンなどの時間を指定してサイトに情報を掲載する場合、CMSを使用している入れば日時指定でタグを表示することもできますが、静的サイトの場合は実際にサーバー上のファイルを書き換えるのが一般的です。
ただ、どうしても作業ができない場合というのもあります。
そんな時に活用できる『JavaScriptで日時を指定してHTMLタグを公開する方法』を紹介します。

デモを見る

コードを紹介

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日時を指定してタグを公開</title>
    <style>
        .campaign {
            font-size: 16px;
            color: #333;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="output">
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const schedule = [
                {
                    startDate: "2024/05/01 10:00:00",
                    endDate: "2025/05/10 10:00:00",
                    html: `<div class="campaign">2025年5月10日10時まで開催中</div>`
                }
            ];

            const now = new Date();
            const outputElement = document.querySelector(".output");

            schedule.forEach(item => {
                const start = new Date(item.startDate);
                const end = new Date(item.endDate);

                if (now >= start && now <= end) {
                    outputElement.insertAdjacentHTML("beforeend", item.html);
                }
            });
        });
    </script>
</body>
</html>

コードを解説

HMTLの解説は割愛します。

JavaScript

読み込みが完了してから実行します。

document.addEventListener("DOMContentLoaded", function () {
});

公開する期間と内容を配列で入力します。

const schedule = [
    {
        startDate: "2024/05/01 10:00:00", // 開始日時
        endDate: "2025/05/10 10:00:00", // 終了日時
        html: `<div class="campaign">2025年5月10日10時まで開催中</div>`
    }
];

現在の日時を取得していきます。

const now = new Date();

HTMLを出力するタグに『output』のクラス名を振ってあります。
このタグを取得します。

const outputElement = document.querySelector(".output");

配列内をループさせて期間内であれば表示させます。

schedule.forEach(item => {
    const start = new Date(item.startDate);
    const end = new Date(item.endDate);

    if (now >= start && now <= end) {
        outputElement.insertAdjacentHTML("beforeend", item.html);
    }
});