Möglicherweise wissen Sie, dass interaktive Komponenten die Benutzererfahrung einer Webanwendung verbessern. Ein solches Element ist ein "Animierter Zähler" Das kann verwendet werden, um Statistiken auf der Website anzuzeigen. Es wird auch verwendet, um die Anzahl der Besucher anzuzeigen, wie viele Mitglieder sich angemeldet haben oder wie viele Leute ein Online -Spiel gespielt haben. Die gleiche Funktionalität kann mit statischen Zahlen erreicht werden. Animationszähler helfen jedoch dabei, Ihrer Website professioneller und ausdrucksstärkerer Erscheinungsbild zu verleihen.

In diesem Beitrag werden die Diskussionen der Diskussion Verfahren von Erstellen ein Animierter Zähler In JavaScript. So lass uns anfangen!

So erstellen Sie einen animierten Zähler in JavaScript

Wir werden nun einen animierten Zähler erstellen, um die Anzahl der Zahlen aus zu zeigen “0" Zu "1000”. Befolgen Sie zu den folgenden Schritt-für-Schritt-Anweisungen:

Schritt 1: HTML -Elemente hinzufügen

Zunächst erstellen wir eine HTML -Datei mit dem Namen “meine Datei.html"Und geben Sie den Titel unserer Anwendung als" an "an"Animierter Zähler" im "" Schild. Wir werden auch unsere JavaScript -Datei verknüpfen “Testdatei.JS"Und CSS -Datei"mein Stil.CSS" mit "Meine Datei.html" auf die folgende Weise:

Im nächsten Schritt werden wir eine Überschrift mit der “hinzufügen“

"Tag und einen Container mit dem"" Schild. Der "Ausweis" des ""Tag wird auf" eingestellt "Schalter”:

Lassen Sie den Zähler beginnen!

Schritt 2: JavaScript -Code

Gehen Sie nun zu Ihrer JavaScript -Datei und verwenden Sie die “setInterval ()"Methode zum Ausführen der"AktualisiertFunktion:

let counts = setInterval (aktualisiert);

Dann erstellen Sie eine “bis zu”Variable, die die Grenze des Zählers darstellt. Als Ausgangspunkt der Wert der “bis zu"Variable wird auf" initialisiert "0”:

zu = 0 lassen;

Im "Aktualisiert()"Funktion, wir werden zuerst die" verwenden "GetElementById ()Methode zum Abrufen des HTML -Elements mit dem “Schalter"ID in"zählen”Variable. Danach werden wir das nutzen “Innerhtml”Eigentum der“zählenVariable, um die Anzahl als innerer Text anzuzeigen. Wenn das "zählen"Wert wird erreichen"1000", Die "ClearInterval ()Die Methode stoppt die Ausführung des Programms:

Funktion aktualisiert ()
var count = document.GetElementById ("Zähler");
zählen.Innerhtml = ++ bis;
if (bis === 1000)

ClearInterval (zählt);

Schritt 3: Stil HTML -Elemente

Um das Erscheinungsbild unserer animierten Counter -Anwendung zu verbessern, werden wir die hinzugefügten HTML -Elemente stylen. Zu diesem Zweck werden wir zunächst den in der vorhandenen Text in den „vorhandenen Text ausrichten“ auszurichtenKörper" zum "Center"Und fügen Sie auch eine" hinzu "Hintergrundbild”:

Körper
Text-Align: Mitte;
Hintergrundbild: URL ('Zähler.JPG ');

Dann setzen wir die Eigenschaften „Farbe“ und „Schriftfamilie“ der zusätzlichen Überschrift:

H1
Farbe: RGB (0, 0, 2);
Schriftfamilie: "Kurier neu", Kurier, Monospace;

Zuletzt werden wir die Farbe der "ändern"SchalterContainer und geben Sie die gewünschten Werte für die “anSchriftfamilie","Schriftgröße" Und "Schriftstil" Eigenschaften:

div
Farbe: RGB (37, 25, 5);
Schriftfamilie: Kurier;
Schriftgröße: 200%;
Schriftstil: normal;

Schritt 4: Ausführen animierter Zähleranwendung ausführen

Öffnen Sie nach dem Speichern des angegebenen Codes die HTML -Datei Ihres animierten Zählerprojekts im Browser mit Hilfe des “Live -Server" Verlängerung:

So sieht unsere animierte Counter JavaScript -Anwendung aus:

Abschluss

Ein Animierter Zähler wird in a erstellt JavaScript -Anwendung um die anzuzeigen Zahlenzähler in einer animierten Form ab 0 und endet mit der angegebenen Nummer. Viele Websites verwenden diese Funktion, um ihre Webseite attraktiver zu machen. Sie können einen animierten Zähler verwenden, um die Anzahl der registrierten Benutzer, die Anzahl der Website -Besucher oder die Anzahl der Personen anzuzeigen, die ein Online -Spiel gespielt haben. In diesem Beitrag wurde das Verfahren zum Erstellen eines animierten Zählers in JavaScript erörtert.