Comment définir le compte à rebours en javascript

Compte à rebours des paramètres JavaScript

Le compte à rebours est une fonction très intéressante et pratique. Sur le site Internet, il peut être utilisé pour rappeler aux utilisateurs l'arrivée de certains événements importants, comme l'heure des soldes, l'heure des soldes, etc. Dans cet article, nous apprendrons comment définir un compte à rebours à l'aide de JavaScript.

Étape 1 : Obtenir l'heure actuelle

Obtenir l'heure actuelle est la première étape pour mettre en œuvre la fonction de compte à rebours. Pour obtenir l'heure actuelle, vous pouvez utiliser les fonctions intégrées de JavaScript. Voici un exemple de code pour obtenir l'heure actuelle :

var currentDate = new Date();

Le code ci-dessus crée un objet Date qui représente la date et l'heure actuelles.

Étape 2 : Fixer la date limite

Après avoir obtenu l'heure actuelle, l'étape suivante consiste à fixer la date limite. La date limite peut être spécifiée manuellement ou obtenue auprès du serveur. Voici un exemple de code pour définir manuellement la date limite :

var dueDate = new Date('2021-12-31 23:59:59');

Le code ci-dessus crée un objet Date, qui représente le point temporel de 23:59:59 le 31 décembre 2021.

Étape 3 : Calculer le temps du compte à rebours

Après avoir obtenu l'heure actuelle et fixé la date limite, l'étape suivante consiste à calculer le temps du compte à rebours. Calculer le temps du compte à rebours est aussi simple que de soustraire la date actuelle de la date d'échéance. Voici un exemple de code qui calcule le temps du compte à rebours :

var timeLeft = dueDate.getTime() - currentDate.getTime();

Le code ci-dessus calcule le nombre de millisecondes entre la date limite et la date actuelle. Si nous voulons les convertir en jours, heures, minutes et secondes, nous pouvons les convertir comme suit :

var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

Le code ci-dessus convertit les millisecondes en jours, heures, minutes et secondes.

Étape 4 : Afficher le compte à rebours

Après avoir calculé le temps du compte à rebours, la dernière étape consiste à afficher le temps du compte à rebours sur la page web. Ceci peut être réalisé en attribuant le compte à rebours à l'attribut textContent de l'élément HTML. Voici un exemple de code qui affiche un compte à rebours :

document.getElementById('countdown').textContent = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒 ';

Le code ci-dessus affiche le nombre calculé de jours, d'heures, de minutes et de secondes sur l'élément HTML avec l'identifiant du compte à rebours.

Étape 5 : Mettre à jour le compte à rebours en temps réel

Le code ci-dessus calculera le compte à rebours et l'affichera uniquement lorsque la page sera chargée. Si vous souhaitez obtenir l'effet de mise à jour du compte à rebours en temps réel, vous pouvez utiliser setInterval. fonction. La fonction setInterval permet à une fonction d'être exécutée régulièrement, obtenant ainsi l'effet de mettre à jour le compte à rebours en temps réel. Voici un exemple de code qui utilise la fonction setInterval pour implémenter le compte à rebours de mise à jour en temps réel :

setInterval(function() {
  var currentDate = new Date();
  var timeLeft = dueDate.getTime() - currentDate.getTime();
  var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
  var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
  document.getElementById('countdown').textContent = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒 ';
}, 1000);

Dans le code ci-dessus, la fonction setInterval exécute une fonction anonyme toutes les 1 000 millisecondes (c'est-à-dire 1 seconde), obtenant ainsi l'effet de réel- compte à rebours de mise à jour de l'heure.

Résumé

Le compte à rebours est une fonction très pratique et intéressante qui peut être utilisée dans les pages Web pour attirer l'attention des utilisateurs. Configurer un compte à rebours à l’aide de JavaScript n’est pas compliqué et ne prend que quelques étapes. Obtenez d'abord l'heure actuelle, puis définissez la date limite, puis calculez le temps du compte à rebours et enfin affichez le temps du compte à rebours sur la page Web. Si vous devez obtenir l'effet de mise à jour du compte à rebours en temps réel, vous pouvez utiliser la fonction setInterval.

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!