https://github.com/leandrorochalg/cronometro-web
[PT] Cronômetro utilizando HTML e JavaScript com contagem de décimos, segundos, minutos e horas
https://github.com/leandrorochalg/cronometro-web
assynchronous cronometer css html javascript web
Last synced: about 2 months ago
JSON representation
[PT] Cronômetro utilizando HTML e JavaScript com contagem de décimos, segundos, minutos e horas
- Host: GitHub
- URL: https://github.com/leandrorochalg/cronometro-web
- Owner: LeandroRochAlg
- Created: 2023-09-21T02:17:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-05T14:08:25.000Z (3 months ago)
- Last Synced: 2025-03-05T15:23:37.251Z (3 months ago)
- Topics: assynchronous, cronometer, css, html, javascript, web
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cronômetro HTML/JavaScript
Este é um exemplo de um cronômetro simples implementado em HTML e JavaScript. O cronômetro exibe horas, minutos, segundos e décimos de segundo, permitindo iniciar, pausar e resetar a contagem. Abaixo, você encontrará informações sobre como usar e entender o código deste cronômetro.
## Uso
Para usar o cronômetro, siga os passos abaixo:
1. Abra o arquivo HTML no seu navegador.
2. Clique no botão "Ligar Cronômetro" para iniciar a contagem.
3. Você pode pausar a contagem clicando no botão "Pausar Cronômetro". O texto do botão mudará para "Retomar Cronômetro" quando pausado.
4. Se desejar reiniciar o cronômetro, clique no botão "Resetar".
## Código
Aqui está uma breve explicação do código presente no arquivo HTML e JavaScript:
### HTML (index.html)
- `
Cronômetro
`: Título da página.
- `
00:00:00.0
`: Parágrafo onde o cronômetro é exibido.
- `Ligar Cronômetro`: Botão para iniciar o cronômetro.
- `Pausar Cronômetro`: Botão para pausar e retomar o cronômetro.
- `Resetar`: Botão para resetar o cronômetro.
- ``: Inclui o arquivo JavaScript que contém a lógica do cronômetro.
### JavaScript (main.js)
- `const btnLigar`, `btnPausar`, `btnResetar`, e `cronometro`: Selecionam os elementos HTML relevantes por meio de seus IDs.
- `let decSeg = 0;`: Variável para controlar os décimos de segundo.
- `let contando;`: Variável de controle para verificar se o cronômetro está em execução ou pausado.
- `let idContagem;`: Variável para armazenar o identificador do intervalo.
- `mostraCronometro()`: Função que atualiza a exibição do cronômetro com horas, minutos, segundos e décimos de segundo.
- Evento `click` no botão "Ligar Cronômetro": Inicia o cronômetro e atualiza o texto do botão de pausa/retomada.
- Evento `click` no botão "Pausar Cronômetro": Pausa ou retoma o cronômetro, dependendo do estado atual.
- Evento `click` no botão "Resetar": Pausa o cronômetro e reinicia a exibição para 00:00:00.0.
Este é um cronômetro simples que demonstra como iniciar, pausar e resetar uma contagem de tempo em JavaScript. Você pode usar esse código como base para criar cronômetros mais complexos ou incorporar a funcionalidade de acordo com suas necessidades.