Comment créer un compte à rebours dans JavaScript

Les minuteries de compte à rebours sont une sorte d'horloges virtuelles qui comptent le temps jusqu'à une date spécifique pour marquer le début ou la fin d'une occasion spéciale. Ils étaient principalement utilisés sur la page de destination des nouveaux sites Web à venir, mais maintenant ils ont trouvé leur chemin dans les sites Web de commerce électronique.

L'élément «Temps est épuisé» sur les pages à rebours aide à créer de l'urgence pour générer plus de conversions sur les sites Web de commerce électronique. Les minuteries peuvent également être utilisées sur des sites Web ou des blogs afin d'afficher un compte à rebours pour les événements spéciaux I.e. anniversaires, anniversaires, réunions, etc. Le compte à rebours peut également être utilisé pour compter le temps jusqu'à ce qu'une offre devienne disponible

Dans ce guide pratiques, nous ferons un compteur de temps dans Vanilla Javascript, au lieu d'utiliser des bibliothèques ou des plugins tiers. Les avantages de la création du compte à rebours à Vanilla Javascript sont les suivants:

• Le code est plus léger car il n'y a pas de dépendances.
• Améliore les performances du site Web car il n'est pas nécessaire de charger des feuilles de style externe et des scripts.

Comment créer un compte à rebours dans JavaScript

Les bases du compte à rebours sont les suivantes:

Définir la date de fin de la minuterie

La première étape de la création d'un temporisateur à rebours consiste à définir la date de fin de la minuterie. Dans cette étape, nous déclarerons une variable et lui attribuerons la valeur de la date de fin de notre minuterie en utilisant le Date objet:

var enddate = new Date ('20 août 2021 00:00:00').obtenir du temps();

Dans l'exemple ci-dessus, nous avons utilisé le .obtenir du temps() méthode; c'est parce que le .obtenir du temps() La méthode convertit la date en un format plus utilisable. Il renvoie le nombre de millisecondes qui se sont écoulées depuis la minuit du 1er janvier 1970, ce qui facilite l'exécution des opérations mathématiques sur le date de fin variable.

Faire un funcion de l'événement de synchronisation

Maintenant, nous allons faire un setInterval () fonction qui exécutera à plusieurs reprises le code à l'intérieur après l'intervalle de temps spécifié. C'est parce que nous voulons mettre à jour notre minuterie après chaque seconde:

var Countdowntimer = setInterval (() =>
// Tout le code JavaScript mentionné ci-dessous se trouve à l'intérieur de cette fonction
, 1000);

Le setInterval () La fonction prend l'argument d'intervalle en millisecondes; Comme il y a 1000 millisecondes en une seconde et que nous voulons rafraîchir le comptoir après chaque seconde, nous en avons donné 1000 comme intervalle de la fonction de l'événement de synchronisation.

Calcul de l'heure

Maintenant, nous allons écrire du code à l'intérieur du setInterval () fonction. Dans cette étape, nous calculerons le temps restant jusqu'à l'heure de fin du comptoir:

var now = new Date ().obtenir du temps();
var restanttime = enddate - maintenant;

Maintenant la valeur du temps restant présent dans la variable temps restant est sous la forme de millisecondes, mais nous voulons montrer le nombre restant de jours, d'heures, de minutes et de secondes, nous devrons donc convertir le nombre de millisecondes en nos périodes requises:

const second = 1000;
const Minute = seconde * 60;
const Hour = minute * 60;
Const Day = heure * 24;
waysleft = math.trunc (temps restant / jour);
HoursEft = mathématiques.trunc ((temps restant% jour) / heure);
Minuchleft = mathématiques.trunc ((temps restant% heure) / minute);
secondsleft = mathématiques.trunc ((temps restant% minute) / seconde);

Il y a 1 000 millisecondes à l'intérieur d'une seconde, 60 000 millisecondes (1000 * 60) en une minute, 3 600 000 millisecondes (1000 * 60 * 60) en une heure et 86 400 000 millisecondes (1000 * 60 * 24 24) dans une journée.

Nous avons calculé les jours restants en divisant la quantité de millisecondes présente dans temps restant par le montant des millisecondes en une journée; S'il reste 86 400 000 millisecondes, alors Jours restants sera égal à un (86 400 000/86 400 000), s'il reste 172 800 000 millisecondes alors Jours restants sera égal à 2 (172 800 000/86 400 000) et ainsi de suite. Le nombre renvoyé par l'opération (l'heure restante / jour) sera le plus souvent un numéro décimal, mais nous n'avons besoin que de la partie du nombre entier, nous avons donc utilisé le Mathématiques.trun () méthode.

Pour calculer le heures qui reste Nous nous sommes d'abord débarrassés des jours en utilisant l'opérateur de module. Ensuite, nous avons calculé les heures à partir du temps restant. Nous pouvons calculer le Minutes restant et seconde Variables de la même manière.

Affichage de la minuterie

Dans cette étape, nous ajouterons du code (balises) dans le corps HTML; Ensuite, nous accéderons à ces balises dans le setInterval () Fonction et modifiez-les pour afficher la minuterie sur la page Web:

À l'intérieur de setInterval () fonction:

document.queySelector ('# jours').innerhtml = waysleft + 'jours';
document.queySelector ('# heures').innerHtml = HoursLeft + 'heures';
document.queySelector ('# Minutes').innerHtml = Minuchleft + 'Minutes';
document.queySelector ('# secondes').innerHtml = secondsleft + 'secondes';

Maintenant, nous allons ajouter un peu plus de code dans le setInterval () Fonction qui sera exécutée dans le cas où le temporisateur serait en place:

si (temps restant <= 0)
document.Écrire ('Time Up!');

Dans l'ensemble, le fichier HTML pour un temporisateur à rebours devrait ressembler à ceci:

Un compte à rebours a été réalisé avec succès; Maintenant, vous pouvez le coiffer en utilisant CSS.

Conclusion

Le compte à rebours est utilisé par des sites Web bientôt pour être en direct ainsi que de nombreux sites Web de commerce électronique. Les sites Web de commerce électronique utilisent des minuteries pour persuader le client de prendre des décisions rapides. La résolution de ce post était d'explorer la fabrication d'un temporisateur à rebours en javascript.