Como criar um contador de cliques simples usando JavaScript

Contador é um dos principais componentes para usar painéis em um aplicativo ou site online. Ele pode ser aplicado em vários contextos, como jogos (para aumentar os pontos ou o valor da pontuação) e vários hacks que economizam tempo. Além disso, usá -lo no site cria um balcão de voto simples para contar o número de itens nos pacotes ou votos.

Este tutorial demonstrará o procedimento para criar um contador simples com um clique em JavaScript.

Como criar um contador de cliques simples usando JavaScript?

Um contador de cliques conta cada clique e o exibe na tela. Incrementa o valor do contador usando o JavaScript “ONCLICKEvento e “contar”, Que será incrementado em cada clique.

Exemplo 1: Criando um contador simples
Neste exemplo, criaremos um contador simples contendo um botão com o “ONCLICK”Evento anexado a ele. Funciona de tal maneira que, quando o botão for clicado, ele invocará a função definida pelo usuário chamada “contrafunc ()”:

Contador:

Clique

Defina o valor inicial do “contar”É igual a 0:

contagem = 0;

O "contrafunc ()”A função aumentará a contagem por uma e a impressão usando o“Innerhtml" propriedade:

função contrafunc ()
contagem ++;
documento.getElementById ("contagem").inerhtml = count;

A saída correspondente é dada da seguinte maneira:

Exemplo 2: Conte e redefinir
Aqui, adicionaremos mais uma funcionalidade no contador acima que é um “Reiniciar" botão. Vamos anexar “ONCLICK”Evento com o botão para invocar a função definida por JavaScript“resetfunc ()”:

Reiniciar

Em "resetfunc ()”, Defina o valor da contagem como 0. Quando o "Reiniciar”O botão é clicado, o balcão gira para 0 como o valor de redefinição:

função resetfunc ()
contagem = 0;
documento.getElementById ("contagem").inerhtml = count;

A saída significa que podemos redefinir facilmente o balcão e iniciar a contagem novamente:

Exemplo 3: Após o começo refrescante da mesma contagem
Nos sites, existem algumas situações em que precisamos iniciar a contagem da mesma contagem existente, mesmo após a atualização da página.

Para esse fim, usaremos o “LocalStorage”Do navegador em nossa função definida por JavaScript, que será chamada no botão Clique no evento onde o evento“ OnClick ”anexou:

função contrafunc ()
if (typeof (armazenamento) !== "indefinido")
if (LocalStorage.contar)
LocalStorage.contagem = número (localStorage.contagem) +1;
outro
LocalStorage.contagem = 1;

documento.getElementById ("contagem").INNERHTML = LocalStorage.contar;
outro
documento.getElementById ("contagem").INNERHTML = "Desculpe, o navegador que você usou não suporta armazenamento na web.";

Pode -se observar que a saída inicia a contagem da mesma, mesmo depois de atualizar a página. Isso acontece por causa do “LocalStorage" propriedade. Esta propriedade permite que os aplicativos e sites JavaScript salvem o par de valores-chave no navegador da web sem qualquer data de validade:

Compilamos todas as instruções necessárias relacionadas à criação de um contador de cliques simples usando JavaScript.

Conclusão

Para criar um contador de cliques simples usando JavaScript, você pode usar o JavaScript “ONCLICK”Evento e uma contagem variável cujo valor será incrementado em cada clique. Você também pode criar um botão de redefinição no balcão para redefinir a contagem. Além disso, utilizando o “LocalStorage”A propriedade pode ajudar a salvar o valor do contador, mesmo após a atualização da página. Este tutorial demonstrou o procedimento para criar um contador em um clique em javascript.