JavaScript Count Up Timer

Os temporizadores desempenham um ótimo papel na organização de nosso estilo de vida em grande parte. Por exemplo, medindo intervalos de tempo, acompanhando o tempo decorrido e o tempo restante em caso de corrida, competição, etc. Nesses casos, a implementação de um cronômetro de contagem prova ser uma ferramenta eficaz para lidar.

Como implementar um cronômetro de contagem em javascript?

As abordagens a seguir podem ser utilizadas para implementar um cronômetro de contagem em JavaScript:

• ““setInterval ()" e "Matemática.chão()" Métodos.
• ““setInterval ()" e "parseint ()" Métodos.
• ““jQuery" Abordagem.

Na seção abaixo, as abordagens mencionadas serão ilustradas uma por uma!

Abordagem 1: Implemente um cronômetro de contagem em JavaScript usando o setInterval () e a matemática.Métodos de piso ()

O "setInterval ()”O método é aplicado para definir um intervalo de tempo específico em uma função específica para executar e o“Matemática.chão()”O método retorna o valor inteiro mais próximo. Esses métodos podem ser implementados para aplicar um intervalo de tempo a uma função específica e executar cálculos precisos para a execução adequada do timer.

Sintaxe

setInterval (função, milissegundos)

Na sintaxe acima:

• ““função”Refere -se à função em que o intervalo de tempo será aplicado e“milissegundos”Aponta para o intervalo de tempo definido.

O "Matemática.chão()”O método leva o“valor”Para ser formatado como seu parâmetro.

Exemplo

Passe pelo snippet de código a seguir para entender o conceito declarado:

00:00:00

Pare o temporizador

Na demonstração acima,

• Especifique o cabeçalho que contém o formato do cronômetro de contagem.
• Depois disso, crie um botão com um anexo “ONCLICK”Evento redirecionando para a função“ClearInterval ()”Método com a variável“cronômetro”Passado como seu parâmetro que contém o“setInterval ()”Método. Isso resultará na limpeza do intervalo de tempo definido no botão Clique.

Agora, siga o seguinte snippet de código JavaScript:

Var Seconds = 0
var timer = setInterval (uptimer, 1000);
função uptimer ()
++segundos;
var hour = matemática.piso (segundos / 3600);
var minuto = matemática.piso ((segundos - hora * 3600) / 60);
var uPDSEGOND = segundos - (hora * 3600 + minuto * 60);
documento.getElementById ("Condep").inerhtml = hora + ":" + minuto + ":" + UPDSEGOND;

No código acima:

• Inicialize os segundos com “0”. Além disso, aplique o método setInterval () na função uptimer () com um intervalo de tempo de “1000Milissegundos.
• Depois disso, defina uma função chamada “uptimer ()”. Em sua definição, calcule o “hora”Dividindo -o pelo número de segundos em uma hora e retorne o valor inteiro mais próximo usando o“Matemática.chão()”Método.
• Da mesma forma, calcule a ata dividindo a subtração de ambos (os segundos passados ​​no timer e o número de segundos em uma hora) pelo total de minutos em uma hora.
• O cálculo para incrementar os segundos no timer será calculado na última etapa.
• Todas as abordagens acima discutidas podem ser evidentes da seguinte forma:

Funcionando do timer:

Abordagem 2: Implemente um cronômetro de contagem em JavaScript usando os métodos setInterval () e parseint ()

O "setInterval ()”O método é aplicado da mesma forma para definir um intervalo de tempo específico em uma função específica para executar e o“parseint ()”O método analisa um valor como uma string e retorna o primeiro número inteiro. Esses métodos podem ser implementados de modo que a função seja executada em um determinado intervalo e exibe a contagem de timer analisando os dígitos corretamente.

Sintaxe

setInterval (função, milissegundos)

Na sintaxe acima:

• ““função”Refere -se à função em que o intervalo de tempo será aplicado e“milissegundos”Aponta para o intervalo de tempo definido.

Parseint (String, Radix)

Na sintaxe dada:

• ““corda”Refere -se à string a ser analisada.
• ““Radix”O valor é“10" por padrão

Exemplo

A demonstração abaixo do rumo explica o conceito declarado:

Conte timer por uma hora

= "minutos"> minutos: = "segundos"> segundos

No código HTML acima:

• Dentro do "”Tag, especifique o título.
• Depois disso, inclua o “”Tag para acumular o cronômetro de contagem aqui em relação à formatação especificada para“minutos" e "segundos”.

Agora, siga o seguinte snippet de código JS:

var segundo = 0;
função uptimer (contagem) contagem de retorno> 9 ? contagem: "0" + contagem;
setInterval (function ()
documento.getElementById ("segundos").inerhtml = uptimer (++ segundo % 60);
documento.getElementById ("minutos").innerhtml = uptimer (parseint (segundo / 60, 10));
, 1000);

Nesta parte do código:

• Inicialize o “segundos”Com 0.
• Depois disso, defina a função chamada “uptimer ()”.
• Esta função adiciona um zero líder e aplica uma verificação se o valor passado é um único dígito i.E (<9). In such a case, it adds a leading zero.
• O "setInterval ()”Método com um intervalo definido de“1000”MS será aplicado ao código adicional. Aqui, o especificado “período”Elemento para os segundos e os minutos serão acessados, respectivamente.
• Para "segundos”, Os segundos inicializados são incrementados e os 60 pontos até o limite final para segundos. Depois disso, eles são passados ​​como um parâmetro para a função uptimer () e exibidos no DOM como um tempo de tempo discutido antes.
• Da mesma forma, no caso de “minutos”, Calcule a ata. Além disso, aplique o “parseint ()”Método para analisar a ata. O primeiro parâmetro no método indica a transição do minuto no segundo.E 60. O segundo parâmetro, conforme descrito na sintaxe, é por padrão definido como 10

A execução do código acima produzirá os seguintes resultados no navegador:

Pode ser observado a partir da saída que o cronômetro de contagem está funcionando perfeitamente.

Abordagem 3: Implemente um cronômetro de contagem em JavaScript usando a abordagem jQuery

Nesta abordagem, o jQuery pode ser aplicado usando seus métodos para executar o requisito fornecido.

Sintaxe

$ (seletor).html ()

Na sintaxe dada:

• ““Seletor" refere-se a "eu ia”Contra o elemento HTML.

Exemplo

As seguintes linhas de código explicam o conceito declarado.

Conte timer por 30 minutos

= "minutos"> minutos: = "segundos"> segundos

No exemplo acima mencionado,

• Primeiro, inclua o “jQuery" biblioteca.
• Agora, da mesma forma, repita a abordagem discutida acima para especificar o “minutos" e "segundos" no "" marcação.

var segundo = 0;
função uptimer (contagem) contagem de retorno> 9 ? contagem: "0" + contagem;
setInterval (function ()
$ ("#segundos").html (uptimer (++ segundo % 60));
$ ("#minutos").html (uptimer (parseint (segundo / 30, 10)));
, 1000);

No código JS acima:

• Da mesma forma, inicialize os segundos com “0”.
• Agora, declare uma função chamada “uptimer ()”.
• Em sua definição, revive as etapas para aplicar um cheque sobre o número de dígitos.
• Da mesma forma, aplique o “setInterval ()”Método com um“1000Intervalo de tempo de milissegundos na função especificada.
• Aqui, aplique o jQuery “html ()”Método para retornar o conteúdo (Innerhtml) dos elementos, referindo -se a eles como“segundos", e "minutos”Respectivamente.

Saída

Neste artigo, todas as abordagens para criar um cronômetro de contagem são ilustradas.

Conclusão

A combinação de “setInterval ()" e "Matemática.chão()”Métodos, os“setInterval ()" e "parseint ()”Métodos ou os“jQuery”A abordagem pode ser utilizada para implementar um cronômetro de contagem usando JavaScript. O setInterval () e a matemática.Os métodos de piso () podem ser implementados para aplicar um intervalo de tempo específico a uma função específica e executar cálculos precisos para a execução adequada do timer. Os métodos setInterval () e parseint () podem ser usados ​​para executar uma função em intervalos específicos repetidamente e exibir a contagem de timer corretamente. A abordagem jQuery pode ser aplicada para integrar o elemento HTML e executar a funcionalidade necessária. Este artigo demonstrou à implementação de um cronômetro de contagem em JavaScript.