【JavaScript】キャンペーン終了までのカウントダウンタイマーの作成

ウェブサイトやブログにおいて、キャンペーンの期限を示すカウントダウンタイマーは効果的な手段の一つです。この記事では、JavaScriptを使用して簡単に実装できる、カウントダウンタイマーの作成方法に焦点を当てます。以下の手順に従って、ウェブサイトにリアルタイムで更新されるカウントダウンを導入しましょう。

サンプルコード
まとめ

サンプルコード

JavaScriptを使用してカウントダウンタイマーを作成するための基本的なコード例を以下に示します。
ターゲットの終了日時は、targetDate変数で指定します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #countdown {
            font-size: 24px;
            text-align: center;
            margin: 20px;
        }
    </style>
    <title>Countdown Timer</title>
</head>
<body>

<div id="countdown"></div>

<script>
    // ターゲットの終了日時（年, 月(0-11), 日, 時間, 分, 秒）
    const targetDate = new Date(2023, 11, 31, 23, 59, 59).getTime();

    function updateCountdown() {
        const currentDate = new Date().getTime();
        const timeDifference = targetDate - currentDate;

        // 日、時、分、秒を計算
        const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

        // タイマーの表示更新
        document.getElementById('countdown').innerHTML = `
            ${days}日 ${hours}時間 ${minutes}分 ${seconds}秒
        `;

        // タイマーがゼロになったら表示を更新せずに停止する
        if (timeDifference <= 0) {
            clearInterval(countdownInterval);
            document.getElementById('countdown').innerHTML = 'キャンペーンは終了しました！';
        }
    }

    // 1秒ごとにタイマーを更新
    const countdownInterval = setInterval(updateCountdown, 1000);

    // 初回表示
    updateCountdown();
</script>

</body>
</html>

このコードは、指定された終了日時までの残り時間を計算し、その情報をHTMLに表示します。指定された終了日時が過ぎると、「キャンペーンは終了しました！」と表示されます。

まとめ

ユーザーに対してリアルタイムな情報を提供し、キャンペーンへの興味を高めることができます。実際の終了日時やデザインに合わせて調整して使用してください。