Construisez un compte à rebours en seulement 18 lignes de JavaScript

Construire un compte à rebours javascript est parfois nécessaire, qu'il s'agisse d'un événement, d'une promotion ou d'un jeu. Vous pouvez créer l'horloge à l'aide de JavaScript natif sans compter sur aucun plugins. Bien qu'il existe de nombreux excellents plugins d'horloge, l'utilisation de JavaScript native présente les avantages suivants:

• Code Lightweight, zéro dépendance.
• Le site Web fonctionne mieux sans charger des scripts et des feuilles de style externes.
• Avec plus de contrôle, vous pouvez contrôler avec précision le comportement de l'horloge sans essayer de plier le plug-in en fonction de vos besoins.

Voici comment créer votre propre compte à rebours avec seulement 18 lignes de code JavaScript:

Pour acquérir une compréhension approfondie de JavaScript, veuillez lire notre livre "JavaScript: Novice to Ninja, 2nd Edition".

points clés

• Vous pouvez créer une horloge à rebours légère et efficace à l'aide de JavaScript sans aucune dépendance, offrant de meilleures performances et un contrôle sans charger des scripts et des feuilles de style externes.
• Ce processus comprend la définition d'une date de fin valide, le calcul du temps restant, la conversion de l'heure en formats disponibles, la sortie des données d'horloge en tant qu'objet réutilisable et afficher l'horloge sur la page et l'arrêter lorsque zéro est atteint.
• Vous pouvez optimiser l'affichage de l'horloge en supprimant le retard initial, en mettant uniquement les nombres dans l'horloge pour améliorer l'efficacité des scripts et en ajoutant des zéros principaux au besoin.
• Pour certains cas d'utilisation, les horloges peuvent être étendues, telles que la planification automatique de l'horloge, la définition d'une minuterie pour un moment précis où un utilisateur arrive et le maintien des progrès de l'horloge à travers les pages en enregistrant l'heure de la fin de l'horloge dans un cookie.
• Un avertissement important à retenir: les dates et les heures JavaScript sont tirés de l'ordinateur de l'utilisateur, ce qui signifie que les utilisateurs peuvent affecter l'horloge JavaScript en modifiant l'heure sur leur ordinateur. Dans des situations extrêmement sensibles, il peut être nécessaire d'obtenir du temps du serveur.

Corloge de base: compte à rebours à une date ou une heure spécifique

La création d'une horloge de base implique les étapes suivantes:

• Définissez la date de fin valide.
• Calculez le temps restant.
• Convertissez l'heure au format disponible.
• Sortir les données de l'horloge en tant qu'objet réutilisable.
• Affiche l'horloge sur la page et arrête l'horloge lorsque zéro est atteint.

Définir la date de fin valide

Tout d'abord, vous devez définir une date de fin valide. Cela devrait être une chaîne qui peut être comprise dans n'importe quel format en utilisant la méthode Date.parse() de JavaScript. Par exemple:

Format ISO 8601:

const deadline = '2015-12-31';

Format court:

const deadline = '31/12/2015';

ou format long:

const deadline = 'December 31 2015';

Chaque format vous permet de spécifier l'heure et le fuseau horaire exacts (ou spécifier le décalage de l'UTC dans le cas d'une date ISO). Par exemple:

const deadline = 'December 31 2015 23:59:59 GMT+0200';

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

Calculez le temps restant

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

const deadline = '2015-12-31';

Tout d'abord, nous créons une variable total pour économiser le temps restant avant la date limite. La fonction Date.parse() convertit une chaîne de temps en valeur en millisecondes. Cela nous permet de soustraire deux fois l'un de l'autre et d'obtenir le temps entre les deux.

const deadline = '31/12/2015';

Convertir le temps au format disponible

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

const deadline = 'December 31 2015';

Décomposons ce qui se passe ici.

1. Diviser les millisecondes de 1000 à secondes: (t / 1000)
2. Divisez le nombre total de secondes par 60 et obtenez le reste. Vous n'avez pas besoin de toutes les secondes, il vous suffit de calculer les secondes restantes après la minute: (T / 1000)% 60
3. autour de lui vers l'entier le plus proche. En effet Math.floor( (t/1000) % 60 )
Répétez cette logique pour convertir des millisecondes en minutes, heures et jours.

Sortir les données de l'horloge en tant qu'objet réutilisable

Lorsque nous préparons les jours, les heures, les minutes et les secondes, nous pouvons maintenant renvoyer les données en tant qu'objet réutilisable:

Cet objet vous permet d'appeler votre fonction et d'obtenir une valeur calculée. Voici un exemple de la façon d'obtenir les minutes restantes:

const deadline = 'December 31 2015 23:59:59 GMT+0200';

est-ce pratique?

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 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

Affichez l'horloge et arrêtez-le lorsqu'il atteint zéro

Maintenant, nous avons une fonction qui publie les jours, les heures, les minutes et les secondes restants, et nous pouvons construire notre horloge. Tout d'abord, nous créerons l'élément HTML suivant pour enregistrer notre horloge:

Ensuite, nous écrivons une fonction qui publie des données d'horloge à notre nouveau div:

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

Cette fonction prend deux paramètres. Ils sont l'ID de l'élément qui contient notre horloge et l'heure de fin du compte à rebours. À l'intérieur de la fonction, nous déclarerons une variable

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

et l'utiliserons pour stocker une référence à notre conteneur d'horloge Div. Cela signifie que nous n'avons pas à continuer d'interroger le DOM.

clock Ensuite, nous exécuterons une fonction anonyme par seconde en utilisant

. Cette fonction fera ce qui suit:

setInterval

Calculez le temps restant.

• Sélectionnez le temps restant à notre div.
• Si le temps restant atteint zéro, arrêtez l'horloge.
À ce stade, la seule étape restante consiste à exécuter l'horloge, comme indiqué ci-dessous:

Félicitations! Vous n'avez plus que 18 lignes de code JavaScript pour avoir une horloge de base.

return {
  total,
  days,
  hours,
  minutes,
  seconds
};

Préparez-vous à afficher votre horloge

Nous devons nous améliorer un peu avant de définir le style d'horloge.

• Retirez le retard initial afin que votre horloge soit affichée immédiatement.
• Rendre le script d'horloge plus efficace afin qu'il ne reconstruit pas toute l'horloge entièrement.
• Ajouter des zéros principaux au besoin.

Supprimer le retard initial

Dans l'horloge, nous utilisons setInterval pour mettre à jour l'affichage à chaque seconde. C'est OK dans la plupart des cas, mais au début, il y aura un deuxième retard. Pour supprimer ce retard, nous devons mettre à jour l'horloge une fois avant le début de l'intervalle.

déplacez la fonction anonyme transmise vers setInterval dans sa propre fonction distincte. Nous pouvons nommer cette fonction updateClock. Appelez la fonction setInterval une fois à l'extérieur updateClock et appelez-la à nouveau à l'intérieur setInterval. De cette façon, l'horloge sera affichée sans délai.

Dans votre javascript, remplacez les éléments suivants:

const deadline = '2015-12-31';

Utilisez les éléments suivants:

const deadline = '31/12/2015';

Évitez la reconstruction continue des horloges

Nous devons rendre les scripts d'horloge plus efficaces. Nous voulons mettre à jour uniquement les numéros dans l'horloge, plutôt que de reconstruire toute l'horloge à chaque seconde. Une façon de le faire est de mettre chaque numéro dans une balise <span></span> et de mettre à jour uniquement les contenus <span></span>.

c'est HTML:

const deadline = 'December 31 2015';

Laissez maintenant une référence à ces éléments. Ajoutez le code suivant après la définition de la variable clock

const deadline = 'December 31 2015 23:59:59 GMT+0200';

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

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 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

Ajouter des zéros principaux

Maintenant que l'horloge ne reconstruit plus chaque seconde, nous avons encore une chose à faire: ajouter des zéros de premier plan. Par exemple, l'horloge n'affiche pas 7 secondes, mais affiche 07 secondes. Un moyen facile consiste à ajouter une chaîne "0" au début du numéro, puis à couper les deux derniers chiffres.

Par exemple, pour ajouter des zéros principaux à la valeur "secondes", vous modifierez ce qui suit:

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

pour ceci:

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

Vous pouvez également ajouter des zéros principaux à des minutes et des heures si vous préférez. Si vous êtes venu si loin, félicitations! Votre horloge est maintenant disponible pour afficher.

Remarque: vous devrez peut-être cliquer sur "Rester" dans Codepen pour démarrer le compte à rebours.

aller un peu plus loin

L'exemple suivant montre comment évoluer l'horloge pour certains cas d'utilisation. Ils sont tous basés sur les exemples de base observés ci-dessus.

Planifiez automatiquement l'horloge

Supposons que nous voulions que l'horloge soit affichée certains jours et pas les autres jours. Par exemple, nous pouvons avoir une série d'événements à venir et ne voulons pas mettre à jour manuellement l'horloge à chaque fois. Voici comment organiser les choses à l'avance.

Masquez l'horloge en définissant la propriété display de l'horloge à none. Ajoutez ensuite ce qui suit à la fonction initializeClock (après la ligne commençant par var clock). Cela entraînera que l'horloge n'apparaît qu'après avoir appelé la fonction initializeClock:

return {
  total,
  days,
  hours,
  minutes,
  seconds
};

Ensuite, nous pouvons spécifier la plage de dates que l'horloge doit afficher. Cela remplacera la variable deadline:

const deadline = '2015-12-31';

schedule Chaque élément du tableau représente une date de début et une date de fin. Comme mentionné ci-dessus, les fuseaux horaires peuvent être inclus, mais j'utilise des dates normales ici pour garder le code lisible.

Enfin, lorsque l'utilisateur charge la page, nous devons vérifier si nous sommes dans une plage de temps spécifiée. Ce code doit remplacer l'appel précédent à la fonction initializeClock.

const deadline = '31/12/2015';

Maintenant, vous pouvez planifier l'horloge à l'avance sans le mettre à jour manuellement. Vous pouvez raccourcir le code au besoin. Pour la lisibilité, je fais mon code verbeux.

Définissez une minuterie de 10 minutes lorsque l'utilisateur arrive

Il peut être nécessaire de définir un compte à rebours pendant un temps donné après l'arrivée de l'utilisateur ou démarre une tâche spécifique. Nous allons définir une minuterie de 10 minutes ici, mais vous pouvez utiliser le temps que vous souhaitez.

Nous avons juste besoin de remplacer la variable deadline par ce qui suit:

const deadline = 'December 31 2015';

Ce code obtient l'heure actuelle et ajoute dix minutes. Les valeurs sont converties en millisecondes, de sorte qu'elles peuvent être additionnées et converties en une nouvelle échéance.

Maintenant, nous avons une horloge qui compte dix minutes à partir du moment où l'utilisateur arrive. N'hésitez pas à essayer différentes durées.

Clock progressit à travers les pages

Parfois, il est nécessaire de sauvegarder l'état de l'horloge, pas seulement la page actuelle. Si nous voulons définir un minuteur de 10 minutes sur l'ensemble du site Web, nous ne voulons pas qu'il se réinitialise lorsque l'utilisateur se rend sur une autre page.

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

C'est la logique:

1. Si la date limite est enregistrée dans le cookie, la date limite est utilisée.
2. Si le cookie n'existe pas, une nouvelle échéance est fixée et stockée dans le cookie.

pour y parvenir, remplacez la variable deadline par ce qui suit:

const deadline = 'December 31 2015 23:59:59 GMT+0200';

Ce code utilise des cookies et des expressions régulières, qui sont toutes deux des sujets distincts. Par conséquent, je ne vais pas entrer dans les détails ici. Une chose à noter est que vous devez changer .yourdomain.com en votre nom de domaine réel.

Un autre avertissement important concernant le temps du client

La date et l'heure JavaScript sont tirées de l'ordinateur de l'utilisateur. Cela signifie que les utilisateurs peuvent affecter l'horloge JavaScript en modifiant le temps sur leur ordinateur. Dans la plupart des cas, cela n'a pas d'importance. Mais dans certaines situations extrêmement sensibles, le temps doit être obtenu à partir du serveur. Cela peut être fait avec du PHP ou de l'Ajax, ce qui dépasse le cadre de ce tutoriel.

Après avoir obtenu le temps du serveur, nous pouvons utiliser les mêmes techniques dans ce tutoriel pour le gérer.

Résumé

Après avoir terminé les exemples de cet article, vous savez maintenant comment créer votre propre compte à rebours avec juste une petite quantité de code JavaScript natif! Nous avons appris à faire un compte à rebours de base et à l'afficher efficacement. Nous avons également couvert certaines fonctionnalités supplémentaires utiles, notamment la planification, le temps absolu et relatif, et l'utilisation de cookies pour enregistrer l'état entre l'accès à la page et au site Web.

Étapes suivantes

Essayez d'utiliser votre code d'horloge. Essayez d'ajouter des styles créatifs ou de nouvelles fonctionnalités (telles que les boutons Pause et restauration). Après cela, si vous souhaitez partager des exemples d'horloge cool, faites-le nous savoir dans le forum.

Les questions fréquemment posées sur l'utilisation de l'heure et de la date dans JavaScript

Comment obtenir la date et l'heure actuelles en JavaScript? Vous pouvez utiliser l'objet Date pour obtenir la date et l'heure actuelles. Créez simplement une nouvelle instance de Date sans paramètres, qui représentera la date et l'heure actuelles.

Quelles sont les opérations de date et d'heure communes en JavaScript? Les opérations communes incluent les dates de mise en forme, l'analyse des chaînes de date, le calcul des intervalles de temps, l'ajout ou la soustraction du temps et la comparaison des dates.

Quelle est la façon recommandée de gérer les fuseaux horaires en JavaScript? Il est préférable d'utiliser le temps UTC autant que possible pour éviter les problèmes de fuseau horaire. Lorsque vous affichez du temps à l'utilisateur, envisagez d'utiliser la méthode toLocaleString et de l'utilisation de l'option timeZone pour spécifier le fuseau horaire souhaité.

Comment calculer la différence entre deux dates en JavaScript? Vous pouvez soustraire deux objets Date pour obtenir des intervalles de temps en millisecondes et les convertir en jours, heures, minutes, etc. en utilisant des opérations mathématiques.

Puis-je facilement manipuler les dates en javascript? Oui, JavaScript fournit quelques façons d'ajouter et de soustraire les intervalles de temps aux dates. L'objet Date a des méthodes telles que setFullYear, setMonth, setDate, etc., qui sont utilisées pour les opérations de date.

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!