Hvordan lage en enkel klikkdisk ved hjelp av JavaScript

Teller er en av hovedkomponentene for bruk av dashboards i en online applikasjon eller nettsted. Det kan brukes i forskjellige sammenhenger, for eksempel spill (for å øke poengene eller scoreverdien) og flere tidsbesparende hacks. Å bruke det på nettstedet oppretter en enkel stemme -teller for å telle antall varer i pakkene eller stemmer.

Denne opplæringen vil demonstrere prosedyren for å lage en enkel teller med et klikk i JavaScript.

Hvordan lage en enkel klikkdisk ved hjelp av JavaScript?

Et klikk -teller teller hvert klikk og viser det på skjermen. Det øker motverdien ved å bruke JavaScript “ved trykk”Arrangement og“telle”, Som vil bli økt på hvert klikk.

Eksempel 1: Opprette enkel teller
I dette eksemplet vil vi lage en enkel teller som inneholder en knapp med "ved trykk”Arrangementet knyttet til det. Det fungerer på en slik måte at når knappen er klikket, vil den påkalle den brukerdefinerte funksjonen som heter “Maskin ()”:

Disk:

Klikk

Angi den opprinnelige verdien av "telle”Tilsvarer 0:

telling = 0;

“Maskin ()”-Funksjonen vil øke tellingen med en og skrive ut ved hjelp av“indrehtml”Eiendom:

Funksjonskaner ()
telle ++;
dokument.getElementById ("Count").InnerHTML = Count;

Tilsvarende utgang er gitt som følger:

Eksempel 2: Tell og tilbakestilt
Her vil vi legge til en mer funksjonalitet i telleren ovenfor som er en "Nullstille”-Knappen. Vi vil legge ved “ved trykk”Hendelse med knappen for å påkalle JavaScript Definerte funksjonen”RESETFUNC ()”:

Nullstille

I “RESETFUNC ()”, Sett telleverdien til 0. Når “Nullstille”Knappen klikker, telleren blir til 0 som tilbakestillingsverdien:

funksjon resetFunc ()
telling = 0;
dokument.getElementById ("Count").InnerHTML = Count;

Utgangen betyr at vi enkelt kan tilbakestille telleren og starte tellingen igjen:

Eksempel 3: Etter forfriskende start fra samme telling
På nettsteder er det noen situasjoner der vi trenger å starte tellingen fra samme eksisterende telling selv etter å ha forfrisket til siden.

For dette formålet vil vi bruke “lokal lagring”Av nettleseren i vår JavaScript -definerte funksjon som vil bli kalt på klikk på -knappen der“ OnClick ”-hendelsen er vedlagt:

Funksjonskaner ()
if (typeof (lagring) !== "udefinert")
if (localStorage.telle)
lokal lagring.Count = Number (LocalStorage.telle) +1;
annet
lokal lagring.telling = 1;

dokument.getElementById ("Count").InnerHTML = LocalStorage.telle;
annet
dokument.getElementById ("Count").InnerHTML = "Beklager, nettleseren du brukte støtter ikke nettlagring.";

Det kan sees at utgangen starter tellingen fra det samme, selv etter å ha forfrisket til siden. Dette skjer på grunn av “lokal lagring”Eiendom. Denne egenskapen gjør det mulig for JavaScript-appene og nettstedene for å lagre nøkkelverdi-paret i nettleseren uten noen utløpsdato:

Vi har samlet alle nødvendige instruksjoner relatert til å lage en enkel klikkdisk ved hjelp av JavaScript.

Konklusjon

For å opprette en enkel klikkdisk ved hjelp av JavaScript, kan du bruke JavaScript "ved trykk”Hendelse og en variabel telling hvis verdi vil bli økt på hvert klikk. Du kan også opprette en tilbakestillingsknapp på disken for å tilbakestille tellingen. Dessuten å bruke "lokal lagring”Eiendom kan hjelpe til med å lagre motverdien selv etter å ha forfrisket siden. Denne opplæringen demonstrerte prosedyren for å lage en teller på et klikk i JavaScript.