Hvordan lage inkrementell og dekrementell teller ved bruk av HTML, CSS og JavaScript?

JavaScript har forskjellige innebygde metoder som er assosiert med HTML og CSS for å bygge front-end nettstedene. På de fleste nettsteder observeres en inkrementell eller dekrementell teller, som enten øker eller reduserer verdien for å tjene et spesifikt formål. For dette formålet brukes aritmetiske operasjoner som tillegg og subtraksjon i henhold til brukerens behov.

Denne guiden gir en trinn-for-trinn-prosedyre for å lage en inkrementell og dekrementell teller ved bruk av HTML, CSS og JavaScript.

Hvordan lage en inkrementell og dekrementell teller?

Betydningen av økning i programmering er å legge til et visst tall til det eksisterende antallet, mens reduksjon betyr å trekke fra et tall fra det eksisterende nummeret. Den trinnvise og decrementelle telleren har sin egen betydning på e-handelsnettsteder.

Eksempel

I dette eksempelet lager vi et inkrementelt så vel som Decremental Counter Project ved å bruke HTML, CSS og JavaScript.

HTML -kode

Et eksempel på økning og redusering av teller

+
-

I ovennevnte HTML er det opprettet to knapper. Én knapp har inkrement () -funksjonen på OnClick -hendelsen, og den andre knappen har Decrement () -funksjonen på OnClick -hendelsen.

CSS -kode

Stylingegenskapene implementeres på tellerknappen så vel som overskrifter. Disse egenskapene inkluderer bredde, høyde, skriftstørrelse, bakgrunnsfarge, farge osv.

JavaScript -kode

funksjonsøkning ()
dokument.getElementById ('DemoInput').stepup ();
funksjon reduserer ()
dokument.getElementById ('DemoInput').trekke seg();

I denne filen, to metoder økning () og Decrement () brukes i enstikkord. De økning () metoden brukes til å øke verdien med en. Tilsvarende Decrement () metoden brukes for å redusere verdien av en. Som standard øker og reduserer og reduserer verdien med 1 med 1 med 1 med 1 med 1 med 1. Imidlertid kan du angi intervall. For eksempel vil Stepup (2) øke verdien med 2.

Komplett kode

Et eksempel på økning og redusering av teller

+
-

Ovennevnte kode utføres i .HTML -fil.

Produksjon

Utgangen returnerer et inngangsfelt med to knapper.

Opprinnelig inneholder ikke tekstboksen noen tall. Når "+" -knappen trykkes, begynner verdien å øke, mens "-" -knappen reduserer verdien.

Konklusjon

De Inkrementelle og dekrementelle tellere er ansatt for å øke eller redusere verdien med et spesifikt tall. Dette inkrementelle/decrementale fenomenet brukes stort sett på handlekurver med online nettsteder. Her har du lært å designe inkrementelle og dekrementelle tellere ved hjelp av Html, CSS, og JavaScript. Vanligvis settes økningen eller reduksjonsverdien på telleren til “1”. Du kan imidlertid angi intervallverdien i henhold til dine krav.