Cronometro em JS
Criando um cronometro com JavaScript
Vamos criar um simples cronometro usando apenas JavaScript e HTML.
Código
Primeiro vamos criar a interface, faremos algo simples, utilizando apenas HTML.
Na estrutura em HTML foi criado alguns span para apresentação das informações de tempo, após isso temos 3 botões para controlar as funcionalidades do cronometro.
Agora vamos iniciar a parte do JavaScript.
Neste código JavaScript, definimos nossas variáveis de controle e associamos as funções aos seus botões.
Agora vamos criar as funções.
Aqui temos as funções start, pause e reset, na função start, iniciamos o setInterval a cada 10 milissegundos(pois a cada 1 milissegundo trava dependendo do navegador).
Na função pause limpamos o setInterval , na função start é necessário da um clear antes de iniciar para não termos vários funcionando em background, por tanto antes de iniciar os procedimentos é chamado a função pause .
Na função reset zeramos nossas variaveis auxiliares e para que o texto na tela volte a ser 0(zero)na tela, setamos manualmente usando o innerText .
Aqui temos a parte final, a função de timer do qual é chamada na função start , nessa função verificamos o tempo passado:
- Se o
millisecondsomado a 10 for igual a 1000, portanto já se passou um segundo e então zeramos o milissegundo e aumentamos um 1 segundo. - Se o
secondfor igual a 60, portanto já se passou um minuto e então zeramos o segundo e aumentamos um 1 minuto. - Se o
minutefor igual a 60, portanto já se passou uma hora e então zeramos o minuto e aumentamos uma hora.
Por fim imprimimos na tela usando o innerText .
A função de returnData é usada apenas para deixar o texto mais dinâmico na tela, fazendo a seguinte logica, se o digito for menor que 10 então concatena com um 0(zero) na frente.
pronto simples assim.
Demo
Veja abaixo o projeto completo funcionando.
Youtube
Se preferi assistir, vejo o desenvolvimento no youtube.
Obrigado por ler!
Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!
😊😊 Até mais! 😊😊
