Comment implémenter un compte à rebours dans js

Il existe deux méthodes pour implémenter des comptes à rebours en JavaScript : setInterval() : créez un minuteur et appelez la fonction à plusieurs reprises toutes les millisecondes spécifiées. setTimeout() : appelle la fonction une seule fois, en retardant l'heure spécifiée.

Implémentation du compte à rebours en JS

En JavaScript, il existe plusieurs façons d'implémenter le compte à rebours. Les deux méthodes suivantes sont couramment utilisées :

1. Méthode setInterval()

La méthode setInterval() crée un minuteur qui appelle à plusieurs reprises une fonction pendant un nombre spécifié de millisecondes. Pour implémenter un compte à rebours à l'aide de la méthode setInterval(), suivez ces étapes : setInterval() 方法创建一个定时器，它以指定的毫秒数重复调用一个函数。要使用 setInterval() 方法实现倒计时器，请按以下步骤操作：

• 定义一个函数来更新倒计时。该函数应将当前时间与目标时间进行比较，并显示剩余时间。
• 计算剩余时间的毫秒数。
• 使用 setInterval() 方法每隔一定的毫秒数调用更新函数。
• 当倒计时结束时，清除 setInterval 定时器。

2. setTimeout() 方法

setTimeout() 方法仅调用一次函数，延迟指定的时间。要使用 setTimeout() 方法实现倒计时器，请按以下步骤操作：

• 定义一个递归函数来更新倒计时。该函数应将当前时间与目标时间进行比较，并显示剩余时间。
• 在函数中，计算剩余时间的毫秒数。
• 使用 setTimeout()
  • Définissez une fonction pour mettre à jour le compte à rebours. La fonction doit comparer l'heure actuelle à l'heure cible et afficher le temps restant.
  • Calculez le temps restant en millisecondes.
• Utilisez la méthode setInterval() pour appeler la fonction de mise à jour toutes les quelques millisecondes.

• Lorsque le compte à rebours se termine, effacez le minuteur setInterval.

  2. Méthode setTimeout()

  La méthode setTimeout() n'appelle la fonction qu'une seule fois, retardant l'heure spécifiée. Pour implémenter un compte à rebours à l'aide de la méthode setTimeout(), suivez ces étapes : 🎜
  • Définissez une fonction récursive pour mettre à jour le compte à rebours. La fonction doit comparer l'heure actuelle à l'heure cible et afficher le temps restant. 🎜
  • Dans la fonction, calculez le nombre de millisecondes restantes. 🎜
  • Utilisez la méthode setTimeout() pour appeler cette fonction après le temps restant. 🎜🎜🎜🎜Exemple de code (méthode 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>

    Copier après la connexion
    🎜🎜Exemple de code (méthode 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>

    Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!