Comment créer un compteur de clics simples à l'aide de JavaScript

Le compteur est l'un des principaux composants pour utiliser des tableaux de bord dans une application ou un site Web en ligne. Il peut être appliqué dans divers contextes, tels que les jeux (pour augmenter les points ou la valeur de score) et plusieurs hacks de temps. De plus, l'utiliser sur le site Web crée un compteur de vote simple pour compter le nombre d'articles dans les packages ou les votes.

Ce tutoriel démontrera la procédure de création d'un compteur simple en un clic dans JavaScript.

Comment créer un compteur de clics simples à l'aide de JavaScript?

Un compteur de clics compte à chaque clic et l'affiche à l'écran. Il augmente la valeur du compteur en utilisant le javascript "sur clic«Événement et«compter», Qui sera incrémenté à chaque clic.

Exemple 1: Création d'un compteur simple
Dans cet exemple, nous créerons un compteur simple contenant un bouton avec le "sur clic»Événement attaché à lui. Il fonctionne de telle manière que lorsque le bouton est cliqué, il invoquera la fonction définie par l'utilisateur nommé «Counter-Func ()»:

Comptoir:

Cliquez sur

Définissez la valeur initiale du «compter»Est égal à 0:

count = 0;

Le "Counter-Func ()«La fonction incrémentera le compte de un et imprimera en utilisant le«innerhtml" propriété:

fonction Counterfunc ()
Count ++;
document.GetElementByid ("Count").innerhtml = count;

La sortie correspondante est donnée comme suit:

Exemple 2: compter et réinitialiser
Ici, nous ajouterons une autre fonctionnalité dans le comptoir ci-dessus qui est un «Réinitialiser" bouton. Nous attacherons "sur clic«Événement avec le bouton pour invoquer la fonction définie par JavaScript«resetfunc ()»:

Réinitialiser

Dans "resetfunc ()», Définissez la valeur de comptage sur 0. Quand le "Réinitialiser"Le bouton est cliqué, le compteur se transforme en 0 comme valeur de réinitialisation:

fonction resetfunc ()
count = 0;
document.GetElementByid ("Count").innerhtml = count;

La sortie signifie que nous pouvons facilement réinitialiser le compteur et recommencer le comptage:

Exemple 3: Après rafraîchissement, commencez par le même décompte
Dans les sites Web, il y a des situations où nous devons commencer le décompte à partir du même décompte existant même après avoir rafraîchi la page.

À cette fin, nous utiliserons le «stockage local”Du navigateur dans notre fonction définie JavaScript qui sera appelée sur le bouton Cliquez sur où l'événement« OnClick »est joint:

fonction Counterfunc ()
if (typeof (stockage) !== "Undefined")
if (localstorage.compter)
stockage local.count = nombre (localstorage.compter) +1;
autre
stockage local.Count = 1;

document.GetElementByid ("Count").innerhtml = localstorage.compter;
autre
document.GetElementByid ("Count").innerhtml = "Désolé, le navigateur que vous avez utilisé ne prend pas en charge le stockage Web."

On peut voir que la sortie commence le compte de la même chose, même après avoir rafraîchi la page. Cela se produit à cause du «stockage local" propriété. Cette propriété permet aux applications et sites JavaScript pour enregistrer la paire de valeurs clés dans le navigateur Web sans aucune date d'expiration:

Nous avons compilé toutes les instructions nécessaires liées à la création d'un compteur de clics simples à l'aide de JavaScript.

Conclusion

Pour créer un compteur de clics simples à l'aide de JavaScript, vous pouvez utiliser le javascript "sur clic”Événement et un nombre de variables dont la valeur sera incrémentée à chaque clic. Vous pouvez également créer un bouton de réinitialisation sur le comptoir pour réinitialiser le décompte. De plus, en utilisant le «stockage local«La propriété peut aider à enregistrer la valeur de comptoir même après avoir rafraîchi la page. Ce tutoriel a démontré la procédure de création d'un compteur sur un clic dans JavaScript.