生成AI+スマホで作成「WordPress(ブログ)で使えるJavaScript」 カウントダウンタイマー(自動更新)

🎄クリスマスまであと
<span id="countdown-display"></span>

function updateTimer() {
    const now = new Date();
    const currentYear = now.getFullYear();

    // 今年のクリスマスを設定
    let target = new Date(currentYear, 11, 25);

    // 過ぎていれば翌年に設定
    if (now > target) {
        target = new Date(currentYear + 1, 11, 25);
    }

    const diff = target - now;

    // 各単位の計算
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
    const mins = Math.floor((diff / (1000 * 60)) % 60);
    const secs = Math.floor((diff / 1000) % 60);

    // 2桁に揃える関数（内側で定義）
    const format = (num) => num.toString().padStart(2,'0' );

    // 表示の書き換え（日は桁数が多いためそのまま、時分秒を2桁化）
    document.getElementById('countdown-display').textContent = 
        ` ${days}日 ${format(hours)}時間 ${format(mins)}分 ${format(secs)}秒`;
}

setInterval(updateTimer, 1000);
updateTimer();