Vous savez peut-être que les composants interactifs améliorent l'expérience utilisateur d'une application Web. Un tel élément est un «Counter animé» qui peut être utilisé pour afficher des statistiques sur le site Web. Il est également utilisé pour afficher le nombre de visiteurs, combien de membres se sont inscrits ou combien de personnes ont joué un jeu en ligne. La même fonctionnalité peut être obtenue en utilisant des nombres statiques; Cependant, les compteurs animés aident à donner à votre site Web une apparence plus professionnelle et expressive.

Ce message discutera du procédure de création un compteur animé dans Javascrip. Alors, commençons!

Comment créer un compteur animé en javascript

Nous allons maintenant créer un compteur animé pour afficher le nombre de numéros de «0" pour "1000". Pour faire de même, suivez les instructions étape par étape ci-dessous:

Étape 1: Ajouter des éléments HTML

Tout d'abord, nous créerons un fichier HTML nommé «mon fichier.html»Et spécifiez le titre de notre application comme«Compteur animé" dans le "" étiqueter. Nous lierons également notre fichier JavaScript "fichier de test.js"Et CSS File"mon style.CSS" avec "Mon fichier.html"De la manière suivante:

À l'étape suivante, nous ajouterons une rubrique en utilisant le «

”Tag et un conteneur avec le"" étiqueter. Le "identifiant" de la ""La balise sera définie sur"comptoir»:

Laissez le compteur commencer!

Étape 2: code javascript

Maintenant, passez à votre fichier JavaScript et utilisez le «setInterval ()«Méthode pour exécuter le«mis à jour" fonction:

LET COUNTS = setInterval (mis à jour);

Ensuite, créez un "jusqu'à”Variable qui représente la limite du compteur. Comme point de départ, la valeur du «jusqu'à"La variable est initialisée à"0»:

Laisser jusqu'à = 0;

Dans le "mis à jour()”Fonction, nous utiliserons d'abord le"getElementByid ()”Méthode pour récupérer l'élément HTML avec le"comptoir"Id dans le"compter»Variable. Après cela, nous utiliserons le «innerhtml«Propriété du«compter»Variable pour afficher le nombre comme son texte intérieur. Quand le "compter"La valeur atteindra"1000", le "ClearInterval ()»La méthode arrêtera l'exécution du programme:

fonction mise à jour ()
Var Count = Document.GetElementById ("Counter");
compter.innerHtml = ++ jusqu'à;
if (jusqu'à === 1000)

ClearInterval (Counts);

Étape 3: Style Elements HTML

Pour améliorer l'apparition de notre application de compteur animé, nous allons styliser les éléments HTML ajoutés. À cette fin, premièrement, nous alignerons le texte présent à l'intérieur du «corps" au "centre"Et ajoutez également un"image de fond»:

corps
Texte-aligne: Centre;
Image en arrière-plan: URL ('Counter.jpg ');

Ensuite, nous définirons les propriétés «couleur» et «font-famille» de la rubrique supplémentaire:

H1
Couleur: RGB (0, 0, 2);
Font-Family: «Courier New», Courier, Monospace;

Enfin, nous changerons la couleur du «comptoir»Conteneur et spécifiez les valeurs souhaitées pour le«famille de polices","taille de police" et "le style de police" propriétés:

div
Couleur: RVB (37, 25, 5);
Font-Family: Courier;
taille de police: 200%;
Style de police: normal;

Étape 4: Exécutez l'application de compteur animé

Après avoir enregistré le code spécifié, ouvrez le fichier HTML de votre projet de compteur animé dans le navigateur à l'aide du "Serveur en direct" extension:

Voici à quoi ressemble notre application JavaScript animée Counter:

Conclusion

Un compteur animé est créé dans un Application JavaScript Pour afficher le compteur numérique sous une forme animée à partir de 0 et se terminant par le numéro spécifié. De nombreux sites Web utilisent cette fonctionnalité pour rendre leur page Web plus attrayante. Vous pouvez utiliser un compteur animé pour afficher le nombre d'utilisateurs enregistrés, le nombre de visiteurs du site Web ou le nombre de personnes qui ont joué un jeu en ligne. Ce message a discuté de la procédure de création d'un compteur animé dans JavaScript.