任意の特定日付へのカウントダウン方法

特定日付へのカウントダウン

カウントダウンタイマーの構築には3つのものが必要です：目標タイムスタンプ、現在の時刻、差分を表示する方法。

基本の計算式

remaining = targetTimestamp - currentTimestamp
days      = floor(remaining / 86400)
hours     = floor((remaining % 86400) / 3600)
minutes   = floor((remaining % 3600) / 60)
seconds   = remaining % 60

JavaScriptの実装

function getCountdown(targetDate) {
  const now = Date.now();
  const target = new Date(targetDate).getTime();
  const diff = Math.abs(target - now);
  const totalSeconds = Math.floor(diff / 1000);
  return {
    days: Math.floor(totalSeconds / 86400),
    hours: Math.floor((totalSeconds % 86400) / 3600),
    minutes: Math.floor((totalSeconds % 3600) / 60),
    seconds: totalSeconds % 60,
    isPast: target < now,
  };
}

エッジケースの処理

1. 過去のターゲット：「まで」の代わりに「から」のラベル付きで経過時間を表示
2. タイムゾーンの違い：比較前に常にUTCに変換
3. 夏時間：DST遷移は1時間のジャンプを引き起こす可能性がある — エポックタイムスタンプを使用
4. ブラウザタブの可視性：ブラウザはバックグラウンドタブのタイマーを制限する