Comment faire un compteur incrémental et décrémental en utilisant HTML, CSS et JavaScript?

JavaScript possède diverses méthodes intégrées associées à HTML et CSS pour construire les sites Web frontaux. Sur la plupart des sites Web, un compteur incrémental ou décrémental est observé, ce qui incrémente ou décrément la valeur pour servir un objectif spécifique. À cette fin, des opérations arithmétiques comme l'addition et la soustraction sont utilisées en fonction des besoins de l'utilisateur.

Ce guide fournit une procédure étape par étape pour créer un compteur incrémental et décrémental à l'aide de HTML, CSS et JavaScript.

Comment faire un compteur incrémentiel et décrémental?

La signification de l'augmentation de la programmation est d'ajouter un certain nombre au nombre existant, tandis que la décrémentation signifie soustraire un nombre du numéro existant. Le compteur incrémental et décrémental a sa propre importance dans les sites de commerce électronique.

Exemple

Dans cet exemple de code, nous créons un projet de compteur incrémentiel et décrémental en utilisant HTML, CSS et JavaScript.

Code HTML

Un exemple d'incrément et de compteur de décréments

+
-

Dans le HTML ci-dessus, deux boutons sont créés. Un bouton a la fonction incrément () sur son événement onClick, et le deuxième bouton a la fonction décrément () sur son événement onClick.

Code CSS

Les propriétés de style sont implémentées sur le bouton du comptoir ainsi que les titres. Ces propriétés comprennent la largeur, la hauteur, la taille de la police, la couleur d'arrière-plan, la couleur, etc.

Code javascript

fonction incrément ()
document.getElementByid ('démoinput').stepup ();
fonction décrément ()
document.getElementByid ('démoinput').startown ();

Dans ce fichier, deux méthodes incrément() et décrémente () sont utilisés dans unétiqueter. Le incrément() la méthode est utilisée pour augmenter la valeur de. De même, le décrémente () la méthode est utilisée pour diminuer la valeur de. Par défaut, les méthodes StepUp () et SUPDOWN () augmentent et diminuent la valeur de 1. Cependant, vous pouvez définir l'intervalle en passant la valeur requise dans les méthodes Stepup () et SUTPORD (). Par exemple, Stepup (2) augmentera la valeur de 2.

Code complet

Un exemple d'incrément et de compteur de décréments

+
-

Le code ci-dessus est exécuté dans le .fichier html.

Sortir

La sortie renvoie un champ de saisie avec deux boutons.

Initialement, la zone de texte ne contient aucun chiffre. Lorsque le bouton «+» est appuyé, la valeur commence à augmenter, tandis que le bouton «-» diminue la valeur.

Conclusion

Le Les compteurs incrémentaux et décrémentaux sont employé pour augmenter ou diminuer la valeur par un nombre spécifique. Ce phénomène incrémental / décrémental est principalement utilisé sur les paniers d'achat de sites en ligne. Ici, vous avez appris à concevoir des compteurs incrémentiels et décrémentaux avec l'aide de Html, CSS, et Javascrip. Habituellement, l'incrément ou la valeur décrément du compteur est réglé sur «1». Cependant, vous pouvez définir la valeur d'intervalle selon vos besoins.