Erstellen Sie mit JavaScript einen einfachen Klick -Zähler

Der Zähler ist eine der Hauptkomponenten für die Verwendung von Dashboards in einer Online -Bewerbung oder -webelle. Es kann in verschiedenen Kontexten angewendet werden, z. Darüber hinaus erstellt die Verwendung auf der Website einen einfachen Abstimmungszähler, um die Anzahl der Elemente in den Paketen oder Stimmen zu zählen.

In diesem Tutorial wird das Verfahren zum Erstellen eines einfachen Zählers mit einem Klick in JavaScript demonstriert.

Erstellen Sie mit JavaScript einen einfachen Klick -Zähler?

Ein Klick -Zähler zählt jeden Klick und zeigt ihn auf dem Bildschirm an. Es erhöht den Zählerwert mit dem JavaScript “ONCLICKEreignis und “zählen”, Die bei jedem Klick erhöht werden.

Beispiel 1: Erstellen einfacher Zähler
In diesem Beispiel erstellen wir einen einfachen Zähler mit einer Taste mit dem “ONCLICK”Ereignis daran beigefügt. Es funktioniert so, dass beim Klicken der Schaltfläche die benutzerdefinierte Funktion mit dem Namen “aufgerufen wirdGegenfunc ()”:

Schalter:

Klicken

Legen Sie den Anfangswert der “fest“zählen”Entspricht 0:

count = 0;

Der "Gegenfunc ()Die Funktion erhöht die Zählung nach einem und druckt mit dem "Drucken"Innerhtml" Eigentum:

Funktion conpunc ()
zählen ++;
dokumentieren.GetElementById ("Graf").Innerhtml = count;

Die entsprechende Ausgabe ist wie folgt angegeben:

Beispiel 2: Zählen und Zurücksetzen
Hier fügen wir eine weitere Funktionalität im obigen Zähler hinzu, die ein "ist"Zurücksetzen" Taste. Wir werden anbringen “ONCLICK"Ereignis mit der Schaltfläche, um die javaScript definierte Funktion aufzurufen"resetfunc ()”:

Zurücksetzen

In "resetfunc ()”, Setzen Sie den Zählwert auf 0. Wenn das "ZurücksetzenDie Schaltfläche "Schaltfläche" wird angeklickt. Der Zähler dreht 0 als Reset -Wert auf 0:

Funktion resetfunc ()
count = 0;
dokumentieren.GetElementById ("Graf").Innerhtml = count;

Die Ausgabe bedeutet, dass wir den Zähler leicht zurücksetzen und die Zählung wieder starten können:

Beispiel 3: Nach dem erfrischenden Start von der gleichen Anzahl
In Websites gibt es einige Situationen, in denen wir die Anzahl der gleichen vorhandenen Zählungen auch nach dem Aktualisieren der Seite starten müssen.

Zu diesem Zweck werden wir das verwenden “lokaler Speicher”Des Browsers in unserer javaScript definierten Funktion, die auf der Schaltfläche Klick auf die Schaltfläche" Onclick "aufgerufen wird: Ereignis angehängt:

Funktion conpunc ()
if (typeof (speicher) !== "undefiniert")
if (LocalStorage.zählen)
lokaler Speicher.count = nummer (LocalStorage.Graf) +1;
anders
lokaler Speicher.count = 1;

dokumentieren.GetElementById ("Graf").Innerhtml = LocalStorage.zählen;
anders
dokumentieren.GetElementById ("Graf").Innerhtml = "Entschuldigung, der von Ihnen verwendete Browser unterstützt keinen Webspeicher.";

Es ist ersichtlich, dass die Ausgabe die Anzahl von gleich startet, auch nach dem Auffrischen der Seite. Dies geschieht aufgrund der “lokaler Speicher" Eigentum. Mit dieser Eigenschaft können die JavaScript-Apps und -Sites das Schlüsselwertpaar im Webbrowser ohne Ablaufdatum speichern:

Wir haben alle notwendigen Anweisungen zum Erstellen eines einfachen Klickschalters mit JavaScript zusammengestellt.

Abschluss

Um einen einfachen Klickzähler mit JavaScript zu erstellen, können Sie das JavaScript verwendenONCLICKEreignis und eine variable Anzahl, deren Wert auf jedem Klick erhöht wird. Sie können auch eine Reset -Taste am Zähler erstellen, um die Anzahl zurückzusetzen. Darüber hinaus nutzen Sie die “lokaler SpeicherDie Eigenschaft kann dazu beitragen, den Zählerwert zu sparen, auch nach dem Aktualisieren der Seite. In diesem Tutorial wurde das Verfahren zum Erstellen eines Zählers auf einem Klick in JavaScript gezeigt.