Come creare un semplice clic di clic utilizzando JavaScript

Counter è uno dei componenti principali per l'utilizzo di dashboard in un'applicazione online o in un sito Web. Può essere applicato in vari contesti, come i giochi (per aumentare i punti o il valore del punteggio) e diversi hack di risparmio nel tempo. Inoltre, l'utilizzo del sito Web crea un semplice contatore di voti per contare il numero di articoli nei pacchetti o nei voti.

Questo tutorial dimostrerà la procedura per la creazione di un semplice contatore con un clic in JavaScript.

Come creare un semplice clic di clic utilizzando JavaScript?

Un contatore di clic conta ogni clic e lo visualizza sullo schermo. Aumenta il valore del contatore utilizzando JavaScript "al clicEvento "e"contare", Che verrà incrementato ad ogni clic.

Esempio 1: creazione di un contatore semplice
In questo esempio, creeremo un semplice contatore contenente un pulsante con "al clic"Evento allegato ad esso. Funziona in modo tale che quando si fa clic sul pulsante, invocherà la funzione definita dall'utente denominata "Counterfunc ()":

Contatore:

Clic

Imposta il valore iniziale di "contare"È uguale a 0:

conta = 0;

IL "Counterfunc ()"La funzione increverà il conteggio di uno e stamperà usando il"Innerhtml" proprietà:

funzione contropunc ()
conta ++;
documento.getElementById ("Count").InnerHtml = COUNT;

L'output corrispondente è indicato come segue:

Esempio 2: contare e ripristinare
Qui, aggiungeremo un'altra funzionalità nel bancone sopra che è un "Ripristina"Pulsante. Allegheremo "al clic"Evento con il pulsante per invocare la funzione definita JavaScript"resetFunc ()":

Ripristina

In "resetFunc ()", Imposta il valore di conteggio su 0. Quando il "Ripristina"Il pulsante viene cliccato, il contatore si trasforma su 0 come valore di ripristino:

funzione resetFunc ()
conta = 0;
documento.getElementById ("Count").InnerHtml = COUNT;

L'output indica che possiamo facilmente ripristinare il contatore e riavviare il conteggio:

Esempio 3: dopo aver rinfrescante l'inizio dallo stesso conteggio
Nei siti Web, ci sono alcune situazioni in cui dobbiamo iniziare il conteggio dallo stesso conteggio esistente anche dopo aver rinfrescato la pagina.

A tale scopo, useremo il "memoria locale"Del browser nella nostra funzione definita JavaScript che verrà chiamato sul pulsante Clicca su" OnClick "allegato:

funzione contropunc ()
if (typeof (archiviazione) !== "Undefined")
if (localStorage.contare)
memoria locale.Count = Number (LocalStorage.conta) +1;
altro
memoria locale.conteggio = 1;

documento.getElementById ("Count").InnerHtml = LocalStorage.contare;
altro
documento.getElementById ("Count").InnerHtml = "scusa, il browser utilizzato non supporta l'archiviazione Web.";

Si può vedere che l'output avvia il conteggio dallo stesso, anche dopo aver rinfrescato la pagina. Questo accade a causa del "memoria locale" proprietà. Questa proprietà consente alle app e ai siti JavaScript di salvare la coppia di valore chiave nel browser Web senza alcuna data di scadenza:

Abbiamo compilato tutte le istruzioni necessarie relative alla creazione di un semplice contatore di clic utilizzando JavaScript.

Conclusione

Per creare un semplice contatore di clic utilizzando JavaScript, è possibile utilizzare JavaScript "al clic"Evento e un conteggio variabile il cui valore verrà incrementato ad ogni clic. È inoltre possibile creare un pulsante di ripristino sul contatore per ripristinare il conteggio. Inoltre, utilizzando il "memoria locale"La proprietà può aiutare a salvare il valore del contatore anche dopo aver aggiornato la pagina. Questo tutorial ha dimostrato la procedura per la creazione di un contatore su un clic in JavaScript.