カウントダウンタイマーをjsで実装する方法-jsチュートリアル-php.cn

カウントダウンタイマーをjsで実装する方法

下次还敢

リリース： 2024-05-01 04:18:19

オリジナル

1069 人が閲覧しました

JavaScript でカウントダウンタイマーを実装するには、2 つのメソッドがあります。 setInterval(): タイマーを作成し、指定されたミリ秒ごとに関数を繰り返し呼び出します。 setTimeout(): 関数を 1 回だけ呼び出し、指定された時間を遅らせます。

カウントダウンタイマーをjsで実装する方法

JS でのカウントダウンタイマーの実装

JavaScript では、カウントダウンタイマーを実装する方法がいくつかあります。次の 2 つのメソッドがよく使用されます:

1. setInterval() メソッド

setInterval() メソッドは、次の数を指定するタイマーを作成します。関数を繰り返し呼び出す時間 (ミリ秒)。 setInterval() メソッドを使用してカウントダウンタイマーを実装するには、次の手順に従います。

カウントダウンを更新する関数を定義します。この関数は、現在時刻と目標時刻を比較し、残り時間を表示する必要があります。
残り時間をミリ秒単位で計算します。
setInterval() メソッドを使用して、一定のミリ秒ごとに更新関数を呼び出します。
カウントダウンが終了したら、setInterval タイマーをクリアします。

2. setTimeout() メソッド

setTimeout() メソッドは関数を 1 回だけ呼び出し、指定された時間だけ遅らせます。 setTimeout() メソッドを使用してカウントダウンタイマーを実装するには、次の手順に従います。

カウントダウンを更新する再帰関数を定義します。この関数は、現在時刻と目標時刻を比較し、残り時間を表示する必要があります。
関数内で、残り時間のミリ秒数を計算します。
残り時間が経過した後にこの関数を呼び出すには、setTimeout() メソッドを使用します。

サンプルコード (setInterval() メソッド)

<code>function updateCountdown() {
  const targetTime = new Date('2023-12-31');
  const currentTime = new Date();
  const msToTarget = targetTime - currentTime;
  const msToHours = Math.floor(msToTarget / (1000 * 60 * 60));
  const msToMinutes = Math.floor(msToTarget / (1000 * 60)) % 60;
  const msToSeconds = Math.floor(msToTarget / 1000) % 60;
  const countdownDisplay = document.getElementById('countdown');
  countdownDisplay.innerHTML = `${msToHours}:${msToMinutes}:${msToSeconds}`;
  if (msToTarget <= 0) {
    clearInterval(timeoutID);
  }
}

const timeoutID = setInterval(updateCountdown, 1000);</code>

ログイン後にコピー

サンプルコード (setTimeout() メソッド)

<code>function countdown(ms) {
  const targetTime = Date.now() + ms;
  const countdownDisplay = document.getElementById('countdown');
  const update = () => {
    const msRemaining = targetTime - Date.now();
    if (msRemaining <= 0) {
      return;
    }
    const msToHours = Math.floor(msRemaining / (1000 * 60 * 60));
    const msToMinutes = Math.floor(msRemaining / (1000 * 60)) % 60;
    const msToSeconds = Math.floor(msRemaining / 1000) % 60;
    countdownDisplay.innerHTML = `${msToHours}:${msToMinutes}:${msToSeconds}`;
    setTimeout(update, 1000);
  }
  update();
}

countdown(3600000);  // 1 小时</code>

ログイン後にコピー

以上がカウントダウンタイマーをjsで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。