Come creare un contatore incrementale e decrementale usando HTML, CSS e JavaScript?

JavaScript ha vari metodi integrati associati a HTML e CSS per costruire i siti Web front-end. Sulla maggior parte dei siti Web, si osserva un contatore incrementale o decrementale, che sta incrementando o decrescere il valore per servire a uno scopo specifico. A tale scopo, operazioni aritmetiche come l'aggiunta e la sottrazione sono impiegate in base alle esigenze dell'utente.

Questa guida fornisce una procedura passo-passo per creare un contatore incrementale e decrementale usando HTML, CSS e JavaScript.

Come creare un contatore incrementale e decrementale?

Il significato dell'incremento nella programmazione è aggiungere un certo numero al numero esistente, mentre il decremento significa sottrarre un numero dal numero esistente. Il contatore incrementale e decrementale ha una propria importanza nei siti di e-commerce.

Esempio

In questo codice di esempio, stiamo creando un progetto di contatore incrementale e decrementale utilizzando HTML, CSS e JavaScript.

Codice HTML

Un esempio di incremento e contatore di decremento

+
-

Nell'HTML sopra, vengono creati due pulsanti. Un pulsante ha la funzione increment () nel suo evento OnClick e il secondo pulsante ha la funzione Decrement () sul suo evento OnClick.

Codice CSS

Le proprietà di styling sono implementate sul pulsante del contatore e le intestazioni. Queste proprietà includono larghezza, altezza, dimensioni del carattere, colore di sfondo, colore, ecc.

Codice JavaScript

funzione increment ()
documento.getElementById ('demoinput').stepup ();
funzione decrement ()
documento.getElementById ('demoinput').Stepdown ();

In questo file, due metodi incremento() E decremento () sono utilizzati all'interno di aetichetta. IL incremento() Il metodo viene utilizzato per aumentare il valore di uno. Allo stesso modo, il decremento () il metodo viene impiegato per decrescere il valore di uno. Per impostazione predefinita, i metodi StepUp () e Stepdown () aumentano e riducono il valore di 1. Tuttavia, è possibile impostare l'intervallo passando il valore richiesto nei metodi StepUp () e Stepdown (). Ad esempio, Stepup (2) increverà il valore di 2.

Codice completo

Un esempio di incremento e contatore di decremento

+
-

Il codice sopra viene eseguito in .file html.

Produzione

L'output restituisce un campo di input con due pulsanti.

Inizialmente, la casella di testo non contiene alcun numero. Quando viene premuto il pulsante "+", il valore inizia in aumento, mentre il pulsante "-" riduce il valore.

Conclusione

IL I contatori incrementali e decrementali sono impiegato per aumentare o ridurre il valore di un numero specifico. Questo fenomeno incrementale/decrementale viene utilizzato principalmente sui carrelli della spesa dei siti online. Qui, hai imparato a progettare contatori incrementali e decrementali con l'aiuto di Html, CSS, E JavaScript. Di solito, l'incremento o il valore di decremento del contatore è impostato su "1". Tuttavia, è possibile impostare il valore dell'intervallo secondo le tue esigenze.