Como fazer contador incremental e decremental usando HTML, CSS e JavaScript?

JavaScript possui vários métodos embutidos que estão associados a HTML e CSS para construir os sites de front-end. Na maioria dos sites, é observado um contador incremental ou decremental, o que é incrementando ou diminuindo o valor para servir a um propósito específico. Para esse fim, operações aritméticas como adição e subtração são empregadas de acordo com as necessidades do usuário.

Este guia fornece um procedimento passo a passo para criar um contador incremental e decremental usando HTML, CSS e JavaScript.

Como fazer um contador incremental e decremental?

O significado de incremento na programação é adicionar um certo número ao número existente, enquanto o decréscimo significa subtrair um número do número existente. O contador incremental e decremental tem sua própria importância em sites de comércio eletrônico.

Exemplo

Neste código de exemplo, estamos criando um contador incremental e decremente, utilizando HTML, CSS e JavaScript.

Código HTML

Um exemplo de contador de incremento e decréscimo

+
-

No HTML acima, dois botões são criados. Um botão tem a função increment () em seu evento OnClick, e o segundo botão tem a função decrement () em seu evento OnClick.

Código CSS

As propriedades de estilo são implementadas no botão do contador, bem como títulos. Essas propriedades incluem largura, altura, tamanho da fonte, cor de fundo, cor, etc.

Código JavaScript

função increment ()
documento.getElementById ('Demoinput').Passo acima();
função decrement ()
documento.getElementById ('Demoinput').demitir-se();

Neste arquivo, dois métodos incremento() e decremento () são utilizados dentro de ummarcação. O incremento() o método é usado para aumentar o valor por um. Da mesma forma, o decremento () o método é empregado para diminuir o valor por um. Por padrão, os métodos Stepup () e Stepdown () aumentam e diminuem o valor em 1. No entanto, você pode definir o intervalo passando o valor necessário nos métodos Stepup () e Stepdown (). Por exemplo, Stepup (2) aumentará o valor em 2.

Código completo

Um exemplo de contador de incremento e decréscimo

+
-

O código acima é executado no .arquivo html.

Saída

A saída retorna um campo de entrada com dois botões.

Inicialmente, a caixa de texto não contém números. Quando o botão "+" é pressionado, o valor começa a aumentar, enquanto o botão "-" diminui o valor.

Conclusão

O contadores incrementais e decrementos são empregado para aumentar ou diminuir o valor por um número específico. Este fenômeno incremental/decremental é usado principalmente em carrinhos de compras de sites online. Aqui, você aprendeu a projetar contadores incrementais e decrementos com a ajuda de Html, CSS, e JavaScript. Geralmente, o valor de incremento ou decréscimo do contador é definido como "1". No entanto, você pode definir o valor do intervalo conforme seus requisitos.