Jak utworzyć prosty licznik kliknięcia za pomocą JavaScript

Counter jest jednym z głównych elementów korzystania z pulpitów nawigacyjnych w aplikacji online lub stronie internetowej. Można go zastosować w różnych kontekstach, takich jak gry (w celu zwiększenia punktów lub wartości wyniku) i kilku hacków ratujących czas. Ponadto korzystanie z niego na stronie internetowej tworzy prosty licznik głosowania na zliczenie liczby pozycji w pakietach lub głosach.

Ten samouczek pokaże procedurę tworzenia prostego licznika za pomocą kliknięcia w JavaScript.

Jak utworzyć prosty licznik kliknięcia za pomocą JavaScript?

Licznik kliknięcia zlicza każde kliknięcie i wyświetla go na ekranie. Zwiększa wartość licznika za pomocą JavaScript „na kliknięcie”Wydarzenie i„liczyć”, Który zostanie zwiększony przy każdym kliknięciu.

Przykład 1: Tworzenie prostego licznika
W tym przykładzie utworzymy prosty licznik zawierający przycisk z „na kliknięcie„Załączone do niego wydarzenie. Działa w taki sposób, że po kliknięciu przycisku wywoła funkcję zdefiniowaną przez użytkownika o nazwie „kontrfunc ()”:

Lada:

Kliknij

Ustaw wartość początkową „liczyć„Oni 0:

Count = 0;

„„kontrfunc ()”Funkcja zwiększy liczbę o jeden i wydrukuje za pomocą„InnerHtml" nieruchomość:

Funkcja Counterfunc ()
count ++;
dokument.getElementById („Count”).innerHtml = Count;

Odpowiednie wyjście jest podane w następujący sposób:

Przykład 2: Policz i zresetuj
Tutaj dodamy jeszcze jedną funkcjonalność w powyższym liczniku, która jest „Resetowanie" przycisk. Przywiązujemy „na kliknięcie„Zdarzenie z przyciskiem, aby wywołać funkcję zdefiniowaną JavaScript”ResetFunc ()”:

Resetowanie

W "ResetFunc ()”, Ustaw wartość liczby na 0. Kiedy "Resetowanie”Przycisk jest klikany, licznik zmienia się w 0 jako wartość resetowania:

funkcja resetfunc ()
Count = 0;
dokument.getElementById („Count”).innerHtml = Count;

Dane wyjściowe oznacza, że ​​możemy łatwo zresetować licznik i rozpocząć zliczanie ponownie:

Przykład 3: Po odświeżaniu start z tej samej liczby
Na stronach internetowych są pewne sytuacje, w których musimy rozpocząć liczbę od tej samej istniejącej liczby nawet po odświeżeniu strony.

W tym celu użyjemy „Lokalny magazyn„Przeglądarka w naszej funkcji zdefiniowanej przez JavaScript, która zostanie wywołana przyciskiem kliknięcia, gdzie załączone zdarzenie„ OnClick ”:

Funkcja Counterfunc ()
if (typeof (pamięć) !== „Undefined”)
if (localstorage.liczyć)
Lokalny magazyn.liczba = liczba (localStorage.liczba) +1;
w przeciwnym razie
Lokalny magazyn.Count = 1;

dokument.getElementById („Count”).innerHtml = LocalStorage.liczyć;
w przeciwnym razie
dokument.getElementById („Count”).innerHtml = "Przepraszamy, używana przeglądarka nie obsługuje pamięci internetowej.";

Można zauważyć, że wyjście rozpoczyna liczbę od tego samego, nawet po odświeżeniu strony. Dzieje się tak z powodu „Lokalny magazyn" nieruchomość. Ta właściwość umożliwia aplikacjom i stronom JavaScript zapisanie pary wartości kluczowej w przeglądarce internetowej bez daty ważności:

Skompilowaliśmy wszystkie niezbędne instrukcje związane z tworzeniem prostego licznika kliknięcia za pomocą JavaScript.

Wniosek

Aby utworzyć prosty licznik kliknięcia za pomocą JavaScript, możesz użyć JavaScript „na kliknięcie”Zdarzenie i liczba zmiennej, której wartość zostanie zwiększona przy każdym kliknięciu. Możesz także utworzyć przycisk resetowania na liczniku, aby zresetować liczbę. Ponadto, wykorzystując „Lokalny magazyn„Własność może pomóc w zapisaniu wartości licznika nawet po odświeżeniu strony. Ten samouczek pokazał procedurę tworzenia licznika za kliknięciem w JavaScript.