Fermer

juin 2, 2020

Créez un compte à rebours en seulement 18 lignes de JavaScript –13 minutes de lecture

Créez un compte à rebours en seulement 18 lignes de JavaScript - SitePoint


Parfois, vous devrez créer une horloge de compte à rebours JavaScript. Vous pouvez avoir un événement, une vente, une promotion ou un jeu. Vous pouvez construire une horloge en JavaScript brut plutôt que d'atteindre le plugin le plus proche. Bien qu'il existe de nombreux plug-ins d'horloge, voici les avantages que vous retirerez de l'utilisation de JavaScript brut:

  • Votre code sera léger car il n'aura aucune dépendance.
  • Votre site Web fonctionnera mieux. Vous n'aurez pas besoin de charger des scripts et des feuilles de style externes.
  • Vous aurez plus de contrôle. Vous aurez construit l'horloge pour qu'elle se comporte exactement comme vous le souhaitez (plutôt que d'essayer de plier un plugin à votre gré).

Donc, sans plus tarder, voici comment créer votre propre horloge de compte à rebours en seulement 18 lignes of JavaScript.

Pour une connaissance approfondie de JavaScript, lisez notre livre, JavaScript: Novice to Ninja, 2nd Edition .

Horloge de base: compte à rebours jusqu'à une date ou une heure spécifique

Voici un aperçu rapide des étapes de création d'une horloge de base:

  • Définissez une date de fin valide.
  • Calculez le temps restant.
  • Convertissez l'heure dans un format utilisable.
  • Sortez les données d'horloge sous la forme d'un objet réutilisable.
  • Affichez l'horloge sur la page et arrêtez-la lorsqu'elle atteint zéro.

Définissez une date de fin valide

Vous devez d'abord définir une date de fin valide. Il doit s'agir d'une chaîne dans l'un des formats compris par la méthode JavaScript Date.parse () . Par exemple:

Le format ISO 8601 :

 const date limite = '2015-12-31';

Le format court:

 const deadline = '31 / 12/2015 ';

Ou, le format long:

 const date limite = '31 décembre 2015';

Chacun de ces formats vous permet de spécifier une heure exacte et un fuseau horaire (ou un décalage par rapport à l'UTC dans le cas des dates ISO). Par exemple:

 const deadline = '31 décembre 2015 23:59:59 GMT + 0200';

Vous pouvez en savoir plus sur le formatage de la date en JavaScript dans cet article .

Calculer le temps restant

L'étape suivante consiste à calculer le temps restant. Nous devons écrire une fonction qui prend une chaîne représentant une heure de fin donnée (comme indiqué ci-dessus). Nous calculons ensuite la différence entre cette heure et l'heure actuelle. Voici à quoi cela ressemble:

 function getTimeRemaining (endtime) {
  const total = Date.parse (endtime) - Date.parse (new Date ());
  const seconds = Math.floor ((total / 1000)% 60);
  const minutes = Math.floor ((total / 1000/60)% 60);
  heures const = Math.floor ((total / (1000 * 60 * 60))% 24);
  const jours = Math.floor (total / (1000 * 60 * 60 * 24));

  revenir {
    total,
    journées,
    heures,
    minutes,
    secondes
  };
}

Premièrement, nous créons une variable total pour conserver le temps restant jusqu'à la date limite. La fonction Date.parse () convertit une chaîne temporelle en une valeur en millisecondes. Cela nous permet de soustraire deux fois les uns des autres et d'obtenir la quantité de temps entre les deux.

 const total = Date.parse (endtime) - Date.parse (new Date ());

Convertir l'heure en un format utilisable

Maintenant, nous voulons convertir les millisecondes en jours, heures, minutes et secondes. Prenons l'exemple des secondes:

 const seconds = Math.floor ((t / 1000)% 60);

Décomposons ce qui se passe ici.

  1. Divisez les millisecondes par 1000 pour convertir en secondes: (t / 1000)
  2. Divisez le total des secondes par 60 et récupérez le reste. Vous ne voulez pas toutes les secondes, juste celles qui restent après le décompte des minutes: (t / 1000)% 60
  3. Arrondissez ce chiffre au nombre entier le plus proche. C'est parce que vous voulez des secondes complètes, pas des fractions de secondes: Plancher mathématique ((t / 1000)% 60)

Répétez cette logique pour convertir les millisecondes en minutes, heures et jours.

Sortie les données d'horloge en tant qu'objet réutilisable

Avec les jours, les heures, les minutes et les secondes préparés, nous sommes maintenant prêts à renvoyer les données en tant qu'objet réutilisable:

 return {
  total,
  journées,
  heures,
  minutes,
  secondes
};

Cet objet vous permet d'appeler votre fonction et d'obtenir l'une des valeurs calculées. Voici un exemple de la façon dont vous obtiendrez les minutes restantes:

 getTimeRemaining (délai) .minutes

Pratique, non?

Afficher l'horloge et l'arrêter lorsqu'elle atteint zéro

Maintenant que nous avons une fonction qui crache les jours, les heures, les minutes et les secondes restantes, nous pouvons construire notre horloge. Nous allons d'abord créer l'élément HTML suivant pour contenir notre horloge:

  

Ensuite, nous allons écrire une fonction qui génère les données d'horloge dans notre nouveau div:

 fonction initializeClock (id, endtime) {
  const horloge = document.getElementById (id);
  const timeinterval = setInterval (() => {
    const t = getTimeRemaining (endtime);
    clock.innerHTML = 'days:' + t.days + '
' +                       'heures:' + t. heures + '
' +                       'minutes:' + t.minutes + '
' +                       'secondes:' + t. secondes;     si (t. total <= 0) {       clearInterval (timeinterval);     }   }, 1000); }

Cette fonction prend deux paramètres. Ce sont l'id de l'élément qui contient notre horloge et l'heure de fin du compte à rebours. Dans la fonction, nous allons déclarer une variable d'horloge et l'utiliser pour stocker une référence à notre div de conteneur d'horloge. Cela signifie que nous ne devons pas continuer à interroger le DOM.

Ensuite, nous utiliserons setInterval pour exécuter une fonction anonyme à chaque seconde. Cette fonction fera ce qui suit:

  • Calculez le temps restant.
  • Sortez le temps restant sur notre div.
  • Si le temps restant arrive à zéro, arrêtez l'horloge.

À ce stade, le seul l'étape restante consiste à exécuter l'horloge comme suit:

 initializeClock ('clockdiv', délai);

Félicitations! Vous avez maintenant une horloge de base en seulement 18 lignes de JavaScript.

Préparez votre horloge pour l'affichage

Avant de styliser l'horloge, nous devons affiner un peu les choses.

  • Supprimez le délai initial pour que votre horloge s'affiche immédiatement.
  • Rendre le script d'horloge plus efficace afin qu'il ne reconstruise pas continuellement toute l'horloge.
  • Ajoutez des zéros non significatifs comme vous le souhaitez.

Supprimez le délai initial

Dans l'horloge, nous avons utilisé setInterval pour mettre à jour l'affichage toutes les secondes. C'est très bien la plupart du temps, sauf au début où il y aura un délai d'une seconde. Pour supprimer ce délai, nous devons mettre à jour l'horloge une fois avant le début de l'intervalle.

Déplaçons la fonction anonyme que nous transmettons à setInterval dans sa propre fonction distincte. Nous pouvons nommer cette fonction updateClock . Appelez la fonction updateClock une fois à l'extérieur de setInterval puis appelez-la à nouveau à l'intérieur setInterval . De cette façon, l'horloge s'affiche sans délai.

Dans votre JavaScript, remplacez ceci:

 const timeinterval = setInterval (() => {...}, 1000);

Avec ceci:

 fonction updateClock () {
  const t = getTimeRemaining (endtime);
  clock.innerHTML = 'days:' + t.days + '
' +                     'heures:' + t. heures + '
' +                     'minutes:' + t.minutes + '
' +                     'secondes:' + t. secondes;   si (t. total <= 0) {     clearInterval (timeinterval);   } } updateClock (); // exécute la fonction une fois pour éviter les retards var timeinterval = setInterval (updateClock, 1000);

Évitez de reconstruire continuellement l'horloge

Nous devons rendre le script d'horloge plus efficace. Nous souhaitons mettre à jour uniquement les chiffres de l'horloge au lieu de reconstruire l'intégralité de l'horloge toutes les secondes. Une façon d'y parvenir consiste à placer chaque nombre dans une balise span et à ne mettre à jour que le contenu de ces plages.

Voici le code HTML:

Jours:
Heures:
Minutes :
Secondes:

Voyons maintenant une référence à ces éléments. Ajoutez le code suivant juste après l'endroit où la variable horloge est définie

 const daysSpan = clock.querySelector ('. Days');
const hoursSpan = clock.querySelector ('. heures');
const minutesSpan = clock.querySelector ('. minutes');
const secondsSpan = clock.querySelector ('. seconds');

Ensuite, nous devons modifier la fonction updateClock pour mettre à jour uniquement les nombres. Le nouveau code ressemblera à ceci:

 function updateClock () {
    const t = getTimeRemaining (endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = t.hours;
    minutesSpan.innerHTML = t.minutes;
    secondsSpan.innerHTML = t.seconds;

    ...
}

Ajouter des zéros non significatifs

Maintenant que l'horloge ne reconstruit plus toutes les secondes, nous avons encore une chose à faire: ajouter des zéros non significatifs. Par exemple, au lieu d'avoir 7 secondes, l'horloge afficherait 07 secondes. Une façon simple de le faire consiste à ajouter une chaîne de «0» au début d'un nombre, puis à couper les deux derniers chiffres.

Par exemple, pour ajouter un zéro de tête à la valeur «secondes», vous » d changez ceci:

 secondsSpan.innerHTML = t.seconds;

à ceci:

 secondsSpan.innerHTML = ('0' + t.secondes) .slice (-2);

Si vous le souhaitez, vous pouvez également ajouter des zéros non significatifs aux minutes et aux heures. Si vous êtes venus jusqu'ici, félicitations! Votre horloge est maintenant prête à être affichée.

Remarque: Vous devrez peut-être cliquer sur «Réexécuter» dans le CodePen pour que le compte à rebours démarre.

Voir le stylet
Horloge de compte à rebours JavaScript de style
par SitePoint ( @SitePoint )
sur CodePen .

Pour aller plus loin

Les exemples suivants montrent comment étendre l'horloge pour certains cas d'utilisation. Ils sont tous basés sur l'exemple de base vu ci-dessus.

Planification automatique de l'horloge

Disons que nous voulons que l'horloge s'affiche certains jours mais pas d'autres. Par exemple, nous pourrions avoir une série d'événements à venir et ne pas vouloir mettre à jour manuellement l'horloge à chaque fois. Voici comment planifier les choses à l'avance.

Masquez l'horloge en définissant sa propriété display sur none dans le CSS. Ajoutez ensuite ce qui suit à la fonction initializeClock (après la ligne commençant par var clock ). Cela provoquera l'affichage de l'horloge uniquement lorsque la fonction initializeClock sera appelée:

 clock.style.display = 'block';

Ensuite, nous pouvons spécifier les dates entre lesquelles l'horloge doit apparaître. Ceci remplacera la variable d'échéance :

 const schedule = [
    ['Jul 25 2015', 'Sept 20 2015'],
    ['Sept 21 2015', 'Jul 25 2016'],
    ['Jul 25 2016', 'Jul 25 2030']
];

Chaque élément du tableau de planification représente une date de début et une date de fin. Comme indiqué ci-dessus, il est possible d'inclure des heures et des fuseaux horaires, mais j'ai utilisé des dates simples ici pour garder le code lisible.

Enfin, lorsqu'un utilisateur charge la page, nous devons vérifier si nous sommes dans l'un des délais spécifiés délais. Ce code doit remplacer l'appel précédent à la fonction initializeClock .

 // itère sur chaque élément de la planification
for (var i = 0; i  currentMs && currentMs> = startMs) {
    initializeClock ('clockdiv', endDate);
  }
}

schedule.forEach (([startDate, endDate]) => {
  // met les dates en millisecondes pour des comparaisons faciles
  const startMs = Date.parse (startDate);
  const endMs = Date.parse (endDate);
  const currentMs = Date.parse (new Date ());

  // si la date actuelle se situe entre les dates de début et de fin, afficher l'horloge
  if (endMs> currentMs && currentMs> = startMs) {
    initializeClock ('clockdiv', endDate);
  }
});

Vous pouvez maintenant planifier votre horloge à l'avance sans avoir à la mettre à jour à la main. Vous pouvez raccourcir le code si vous le souhaitez. J'ai rendu le mien détaillé pour des raisons de lisibilité.

Régler la minuterie à 10 minutes de l'arrivée de l'utilisateur

Il peut être nécessaire de définir un compte à rebours pour une durée donnée après que l'utilisateur arrive ou commence une tâche spécifique. Nous allons régler un minuteur sur 10 minutes ici, mais vous pouvez utiliser le temps que vous voulez.

Tout ce que nous devons faire ici est de remplacer la variable date limite par ceci:

 const timeInMinutes = 10;
const currentTime = Date.parse (new Date ());
Const date limite = nouvelle date (currentTime + timeInMinutes * 60 * 1000);

Ce code prend l'heure actuelle et ajoute dix minutes. Les valeurs sont converties en millisecondes, elles peuvent donc être additionnées et transformées en un nouveau délai.

Nous avons maintenant une horloge qui décompte dix minutes à partir de l'arrivée de l'utilisateur. N'hésitez pas à jouer et à essayer différentes durées.

Maintenir la progression de l'horloge sur les pages

Parfois, il est nécessaire de conserver l'état de l'horloge pour plus que la page actuelle. Si nous voulions définir un minuteur de 10 minutes sur le site, nous ne voudrions pas qu'il se réinitialise lorsque l'utilisateur accède à une autre page.

Une solution consiste à enregistrer l'heure de fin de l'horloge dans un cookie. De cette façon, la navigation vers une nouvelle page ne réinitialisera pas l'heure de fin à dix minutes à partir de maintenant.

Voici la logique:

  1. Si une date limite a été enregistrée dans un cookie, utilisez cette date limite.
  2. Si le cookie n'est pas présent, définissez un nouveau délai et stockez-le dans un cookie.

Pour l'implémenter, remplacez la variable délai par ce qui suit:

 let deadline;

// s'il y a un cookie avec le nom myClock, utilisez cette valeur comme date limite
if (document.cookie && document.cookie.match ('myClock')) {
  // obtenir la valeur du délai à partir du cookie
  date limite = document.cookie.match (/ (^ |;) myClock = ([^;] +) /) [2];
} autre {
  // sinon, fixez un délai dans 10 minutes et
  // l'enregistrer dans un cookie avec ce nom

  // créer un délai dans 10 minutes
  const timeInMinutes = 10;
  const currentTime = Date.parse (new Date ());
  date limite = nouvelle date (currentTime + timeInMinutes * 60 * 1000);

  // stocker le délai dans le cookie pour référence future
  document.cookie = 'myClock =' + délai + '; chemin = /; domaine = .votredomaine.com ';
}

Ce code utilise des cookies et des expressions régulières qui sont tous deux des sujets distincts à part entière. Pour cette raison, je n'entrerai pas dans trop de détails ici. La seule chose importante à noter est que vous devrez remplacer .votredomaine.com par votre domaine actuel.

Une mise en garde importante concernant l'heure côté client

Les dates et heures JavaScript sont extraites de l'ordinateur de l'utilisateur. Cela signifie que l'utilisateur peut affecter une horloge JavaScript en modifiant l'heure sur sa machine. Dans la plupart des cas, cela n’importe pas. Mais dans le cas de quelque chose de super sensible, il faudra obtenir l'heure du serveur. Cela peut être fait avec un peu de PHP ou d'Ajax, qui dépassent tous les deux ce didacticiel.

Après avoir obtenu l'heure du serveur, nous pouvons travailler avec lui en utilisant les mêmes techniques que ce didacticiel.

Résumé

Après avoir étudié les exemples de cet article, vous savez maintenant comment créer votre propre compte à rebours avec seulement quelques lignes de code JavaScript vanille! Nous avons examiné comment créer une horloge de compte à rebours de base et l'afficher efficacement. Nous avons également abordé l'ajout de fonctionnalités supplémentaires utiles, notamment la planification, les temps absolus et relatifs, et la préservation de l'état entre les pages et les visites sur le site avec des cookies.

What’s Next?

Jouez avec votre code d'horloge. Essayez d'ajouter des styles créatifs ou de nouvelles fonctionnalités (comme les boutons de pause et de reprise). Après cela, si vous trouvez des exemples d'horloge sympas que vous aimeriez partager, faites-le nous savoir sur les forums .



Source link

0 Partages