Cómo crear un simple contador de clics usando JavaScript

El contador es uno de los componentes principales para usar paneles en una aplicación o sitio web en línea. Se puede aplicar en varios contextos, como los juegos (para aumentar los puntos o el valor de puntaje) y varios hacks de ahorro de tiempo. Además, usarlo en el sitio web crea un simple contador de votos para contar la cantidad de artículos en los paquetes o votos.

Este tutorial demostrará el procedimiento para crear un contador simple con un clic en JavaScript.

Cómo crear un simple contador de clics usando JavaScript?

Un contador de clics cuenta cada clic y lo muestra en la pantalla. Incrementa el valor del contador utilizando el JavaScript "al hacer clic"Evento y"contar", Que se incrementará en cada clic.

Ejemplo 1: Creación de contador simple
En este ejemplo, crearemos un contador simple que contenga un botón con el "al hacer clic"Evento adjunto a él. Funciona de tal manera que cuando se haga clic en el botón, invocará la función definida por el usuario llamada "Contrafunc ()":

Encimera:

Hacer clic

Establezca el valor inicial del "contar"Es igual a 0:

recuento = 0;

El "Contrafunc ()"La función incrementará el recuento de uno e imprimirá usando el"innerhtml" propiedad:

función contrafunc ()
contar ++;
documento.getElementById ("contar").innerhtml = count;

La salida correspondiente se da de la siguiente manera:

Ejemplo 2: contar y restablecer
Aquí, agregaremos una funcionalidad más en el mostrador anterior que es un "Reiniciar" botón. Nos adjuntaremos "al hacer clic"Evento con el botón para invocar la función definida de JavaScript"RESETFUNC ()":

Reiniciar

En "RESETFUNC ()", Establezca el valor de conteo en 0. Cuando el "ReiniciarSe hace clic en el botón, el contador gira a 0 a medida que el valor de reinicio:

función resetFunc ()
recuento = 0;
documento.getElementById ("contar").innerhtml = count;

La salida significa que podemos restablecer fácilmente el contador y comenzar el conteo nuevamente:

Ejemplo 3: después de refrescarse desde el mismo recuento
En los sitios web, hay algunas situaciones en las que debemos comenzar el recuento desde el mismo recuento existente incluso después de actualizar la página.

Para este propósito, usaremos el "almacenamiento local"Del navegador en nuestra función definida de JavaScript que se llamará en el botón Haga clic en el evento" OnClick "adjunto:

función contrafunc ()
if (typeof (almacenamiento) !== "indefinido")
if (LocalStorage.contar)
almacenamiento local.Count = Número (LocalStorage.contar) +1;
demás
almacenamiento local.recuento = 1;

documento.getElementById ("contar").innerhtml = LocalStorage.contar;
demás
documento.getElementById ("contar").innerhtml = "Lo sentimos, el navegador que usó no admite el almacenamiento web.";

Se puede ver que la salida comienza el recuento desde el mismo, incluso después de actualizar la página. Esto sucede por el "almacenamiento local" propiedad. Esta propiedad permite que las aplicaciones y sitios de JavaScript guarden el par de valores clave en el navegador web sin ninguna fecha de vencimiento:

Hemos compilado todas las instrucciones necesarias relacionadas con la creación de un simple contador de clics usando JavaScript.

Conclusión

Para crear un contador de clic simple usando JavaScript, puede usar el JavaScript "al hacer clic"Evento y un recuento de variables cuyo valor se incrementará en cada clic. También puede crear un botón de reinicio en el mostrador para restablecer el recuento. Además, utilizando el "almacenamiento local"La propiedad puede ayudar a guardar el valor del contador incluso después de actualizar la página. Este tutorial demostró el procedimiento para crear un contador con un clic en JavaScript.