Cómo hacer un contador incremental y declemental usando HTML, CSS y JavaScript?

JavaScript tiene varios métodos integrados asociados con HTML y CSS para construir los sitios web de front-end. En la mayoría de los sitios web, se observa un contador incremental o decremental, que está incrementando o disminuyendo el valor para servir a un propósito específico. Para este propósito, las operaciones aritméticas como la adición y la resta se emplean de acuerdo con las necesidades del usuario.

Esta guía proporciona un procedimiento paso a paso para crear un contador incremental y decremental usando HTML, CSS y JavaScript.

Cómo hacer un mostrador incremental y declental?

El significado de incremento en la programación es agregar un cierto número al número existente, mientras que la disminución significa restar un número del número existente. El mostrador incremental y declemental tiene su propia importancia en los sitios de comercio electrónico.

Ejemplo

En este código de ejemplo, estamos creando un proyecto de contador incremental y declemental utilizando HTML, CSS y JavaScript.

código HTML

Un ejemplo de contador de incremento y disminución

+
-

En el HTML anterior, se crean dos botones. Un botón tiene la función increment () en su evento OnClick, y el segundo botón tiene la función de disminución () en su evento OnClick.

Código CSS

Las propiedades de estilo se implementan en el botón de contador y encabezados. Estas propiedades incluyen ancho, altura, tamaño de fuente, color de fondo, color, etc.

Código JavaScript

function increment ()
documento.GetElementById ('DemoInput').aumentar();
función de disminución ()
documento.GetElementById ('DemoInput').stepdown ();

En este archivo, dos métodos incremento() y decremento() se utilizan dentro de unetiqueta. El incremento() El método se utiliza para aumentar el valor en uno. Del mismo modo, el decremento() El método se emplea para disminuir el valor en uno. De manera predeterminada, los métodos Stepup () y Stepdown () aumentan y disminuyen el valor en 1. Sin embargo, puede establecer el intervalo pasando el valor requerido en los métodos Stepup () y Stepdown (). Por ejemplo, Stepup (2) incrementará el valor en 2.

Código completo

Un ejemplo de contador de incremento y disminución

+
-

El código anterior se ejecuta en el .archivo html.

Producción

La salida devuelve un campo de entrada con dos botones.

Inicialmente, el cuadro de texto no contiene ningún número. Cuando se presiona el botón "+", el valor comienza a aumentar, mientras que el botón "-" disminuye el valor.

Conclusión

El Los contadores incrementales y decrementales son empleado para aumentar o disminuir el valor por un número específico. Este fenómeno incremental/declemental se usa principalmente en los carritos de compras de sitios en línea. Aquí, ha aprendido a diseñar contadores incrementales y decrementales con la ayuda de Html, CSS, y Javascript. Por lo general, el valor de incremento o disminución del contador se establece en "1". Sin embargo, puede establecer el valor de intervalo según sus requisitos.