【JavaScript】カウントダウンタイマーの作り方｜キャンペーン終了・イベントまでの残り時間表示・タイムゾーン対応・終了演出・完成形クラスまで解説

/**
 * 目標日時までの残り時間を日・時・分・秒に分解して返す
 * @param {Date|string} targetDate - 目標日時
 * @returns {{ days, hours, minutes, seconds, expired }}
 */
function getRemainingTime(targetDate) {
  const diff = new Date(targetDate) - new Date();

  if (diff <= 0) {
    return { days: 0, hours: 0, minutes: 0, seconds: 0, expired: true };
  }

  const totalSeconds = Math.floor(diff / 1000);
  const days    = Math.floor(totalSeconds / 86400);
  const hours   = Math.floor((totalSeconds % 86400) / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;

  return { days, hours, minutes, seconds, expired: false };
}

// 使用例
const target = '2026-06-30T23:59:59+09:00';  // 日本時間で指定
const t = getRemainingTime(target);
console.log(`残り ${t.days}日 ${t.hours}時間 ${t.minutes}分 ${t.seconds}秒`);

<div class="countdown" id="campaign-timer" aria-live="polite" aria-label="キャンペーン終了まで">
  <div class="countdown-unit">
    <span class="countdown-value" id="cd-days">--</span>
    <span class="countdown-label">日</span>
  </div>
  <div class="countdown-unit">
    <span class="countdown-value" id="cd-hours">--</span>
    <span class="countdown-label">時間</span>
  </div>
  <div class="countdown-unit">
    <span class="countdown-value" id="cd-minutes">--</span>
    <span class="countdown-label">分</span>
  </div>
  <div class="countdown-unit">
    <span class="countdown-value" id="cd-seconds">--</span>
    <span class="countdown-label">秒</span>
  </div>
</div>
<div id="campaign-expired" hidden>
  <p>キャンペーンは終了しました。</p>
</div>

const TARGET_DATE = '2026-06-30T23:59:59+09:00';

// ゼロパディング（"3" → "03"）
const pad = (n) => String(n).padStart(2, '0');

function updateTimer() {
  const { days, hours, minutes, seconds, expired } = getRemainingTime(TARGET_DATE);

  if (expired) {
    // タイマー停止 + 終了表示に切り替え
    clearInterval(timerId);
    document.getElementById('campaign-timer').hidden = true;
    document.getElementById('campaign-expired').hidden = false;
    return;
  }

  document.getElementById('cd-days').textContent    = days;
  document.getElementById('cd-hours').textContent   = pad(hours);
  document.getElementById('cd-minutes').textContent = pad(minutes);
  document.getElementById('cd-seconds').textContent = pad(seconds);
}

// 即時実行（setInterval は1秒後から始まるため）
updateTimer();
const timerId = setInterval(updateTimer, 1000);

.countdown {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #1e293b;
  color: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  min-width: 72px;
}

.countdown-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums; /* 数字の幅を固定して揺れを防ぐ */
}

.countdown-label {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 4px;
}

/* ========== 残り1時間を切ったら緊急演出 ========== */
.countdown.urgent .countdown-unit {
  background: #dc2626;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .countdown.urgent .countdown-unit {
    animation: none;
  }
}

function updateTimer() {
  const { days, hours, minutes, seconds, expired } = getRemainingTime(TARGET_DATE);
  const timer = document.getElementById('campaign-timer');

  if (expired) {
    clearInterval(timerId);
    timer.hidden = true;
    document.getElementById('campaign-expired').hidden = false;
    return;
  }

  document.getElementById('cd-days').textContent    = days;
  document.getElementById('cd-hours').textContent   = pad(hours);
  document.getElementById('cd-minutes').textContent = pad(minutes);
  document.getElementById('cd-seconds').textContent = pad(seconds);

  // 残り1時間（3600秒）未満なら緊急演出
  const totalSecsLeft = days * 86400 + hours * 3600 + minutes * 60 + seconds;
  timer.classList.toggle('urgent', totalSecsLeft < 3600);
}

// NG: タイムゾーン不明。実行環境のローカル時間として解釈される
const bad = new Date('2026-06-30 23:59:59');

// OK: +09:00 を明示することで日本標準時（JST）と確定する
const good = new Date('2026-06-30T23:59:59+09:00');

// OK: UTC で指定することも多い（UTC+9 の場合は 14:59:59 UTC）
const utc  = new Date('2026-06-30T14:59:59Z');

console.log(good.getTime() === utc.getTime()); // true（同じ瞬間）

// 複数のキャンペーンを一元管理
const CAMPAIGNS = {
  summer: {
    label:  '夏のビッグセール',
    target: '2026-08-31T23:59:59+09:00',
    timerId: null,
  },
  autumn: {
    label:  '秋の新作フェア',
    target: '2026-11-30T23:59:59+09:00',
    timerId: null,
  },
};

let timerId = null;

function startTimer() {
  if (timerId) return; // 二重起動防止
  updateTimer();       // 即時実行
  timerId = setInterval(updateTimer, 1000);
}

function stopTimer() {
  clearInterval(timerId);
  timerId = null;
}

// タブがアクティブになったとき再開、非表示になったとき停止
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    stopTimer();
  } else {
    // タブに戻ったとき即座に表示を更新してから再開
    updateTimer();
    startTimer();
  }
});

startTimer();

class CountdownTimer {
  #targetDate;
  #elements;
  #onExpire;
  #urgentThreshold;
  #timerId = null;

  /**
   * @param {object} options
   * @param {string}   options.target        - ISO 8601 形式の目標日時
   * @param {object}   options.elements      - 各表示要素のセレクタ
   * @param {Function} [options.onExpire]    - 終了時コールバック
   * @param {number}   [options.urgentSecs]  - 緊急演出を開始する残り秒数（デフォルト 3600）
   */
  constructor({ target, elements, onExpire, urgentSecs = 3600 }) {
    this.#targetDate     = new Date(target);
    this.#elements       = elements;
    this.#onExpire       = onExpire ?? (() => {});
    this.#urgentThreshold = urgentSecs;

    this.#update();
    this.#start();
    this.#bindVisibility();
  }

  #getRemaining() {
    const diff = this.#targetDate - new Date();
    if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0, expired: true };
    const s = Math.floor(diff / 1000);
    return {
      days:    Math.floor(s / 86400),
      hours:   Math.floor((s % 86400) / 3600),
      minutes: Math.floor((s % 3600) / 60),
      seconds: s % 60,
      total:   s,
      expired: false,
    };
  }

  #setText(selector, value) {
    const el = document.querySelector(selector);
    if (el) el.textContent = value;
  }

  #update() {
    const pad = (n) => String(n).padStart(2, '0');
    const t = this.#getRemaining();

    if (t.expired) {
      this.#stop();
      if (this.#elements.container) {
        document.querySelector(this.#elements.container)?.setAttribute('hidden', '');
      }
      if (this.#elements.expired) {
        document.querySelector(this.#elements.expired)?.removeAttribute('hidden');
      }
      this.#onExpire();
      return;
    }

    this.#setText(this.#elements.days,    t.days);
    this.#setText(this.#elements.hours,   pad(t.hours));
    this.#setText(this.#elements.minutes, pad(t.minutes));
    this.#setText(this.#elements.seconds, pad(t.seconds));

    // 緊急演出
    const container = document.querySelector(this.#elements.container);
    container?.classList.toggle('urgent', t.total < this.#urgentThreshold);
  }

  #start() {
    if (this.#timerId) return;
    this.#timerId = setInterval(() => this.#update(), 1000);
  }

  #stop() {
    clearInterval(this.#timerId);
    this.#timerId = null;
  }

  #bindVisibility() {
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        this.#stop();
      } else {
        this.#update();
        this.#start();
      }
    });
  }

  /** タイマーを完全に破棄する */
  destroy() {
    this.#stop();
  }
}

// 使用例
const timer = new CountdownTimer({
  target: '2026-08-31T23:59:59+09:00',
  elements: {
    container: '#campaign-timer',
    days:      '#cd-days',
    hours:     '#cd-hours',
    minutes:   '#cd-minutes',
    seconds:   '#cd-seconds',
    expired:   '#campaign-expired',
  },
  urgentSecs: 3600, // 残り1時間で緊急演出
  onExpire: () => {
    console.log('キャンペーン終了！');
    // サーバーに通知を送る、ページをリロードするなど
  },
});