Se você está começando a programar ou quer criar um projeto interessante com JavaScript, criar um cronômetro JavaScript pode ser uma excelente forma de aprimorar suas habilidades. Este tutorial vai te guiar passo a passo para desenvolver um cronômetro elegante utilizando HTML, CSS e JavaScript. Vamos focar em um design simples, mas moderno, com funcionalidades essenciais como iniciar, parar e resetar o tempo.
Aproveite para testar e experimentar as funcionalidades diretamente no CodePen abaixo:
See the Pen Cronômetro – Código Fácil by Código Fácil (@CodigoFacil) on CodePen.
Por que Criar um Cronômetro em JavaScript?
Um cronômetro em JavaScript é útil em várias situações, desde temporizadores para atividades físicas até ferramentas para meditação ou controle de tempo em eventos. Além disso, é um ótimo exercício para praticar manipulação de tempo no JavaScript e entender o funcionamento de eventos e intervalos no navegador.
Vamos ao passo a passo!
Estrutura HTML do Cronômetro JavaScript
Começamos pela criação da estrutura básica da página HTML. Ela é simples e inclui uma área onde o tempo será exibido e os botões para controlar o cronômetro.
Código HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cronômetro JavaScript</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div class="container">
<h1>Cronômetro JavaScript</h1>
<div id="cronometro">00:00:00</div>
<div class="botoes">
<button id="botaoIniciarParar" onclick="iniciarParar()">Iniciar</button>
<button id="botaoResetar" onclick="resetar()">Resetar</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Neste código HTML:
- O
<div id="cronometro">exibe o tempo formatado. - Os botões de “Iniciar” e “Resetar” são controlados pelas funções JavaScript que veremos em breve.
Estilo CSS para o Cronômetro
Agora, vamos criar o arquivo CSS que vai estilizar o cronômetro e torná-lo visualmente agradável. O foco aqui é criar um design minimalista, mas moderno.
Código CSS:
/* Resetando margens e bordas para padronizar o estilo */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
/* Centralizando o conteúdo da página */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #282c34;
color: white;
}
/* Estilo do container principal */
.container {
text-align: center;
background-color: #3b3f4a;
padding: 30px;
border-radius: 20px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
/* Estilo da exibição do cronômetro */
#cronometro {
font-size: 3rem;
margin-bottom: 20px;
color: #00d8ff;
}
/* Estilo dos botões */
.botoes button {
padding: 10px 20px;
margin: 10px;
font-size: 1.2rem;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Cor do botão iniciar/parar */
#botaoIniciarParar {
background-color: #00d8ff;
color: #282c34;
}
/* Cor do botão resetar */
#botaoResetar {
background-color: #ff4b5c;
color: white;
}
/* Efeito de hover nos botões */
.botoes button:hover {
opacity: 0.8;
}
/* Efeito de clique nos botões */
.botoes button:active {
transform: scale(0.98);
}Aqui definimos um layout centrado com uma paleta de cores moderna, usando azul e vermelho para os botões. A estilização dos botões é feita com efeitos de hover e clique para melhorar a interatividade.
Criando a Lógica em JavaScript
Agora que temos a estrutura e o estilo prontos, é hora de fazer o cronômetro funcionar. Vamos usar JavaScript para controlar a contagem de horas, minutos e segundos, além das funções de iniciar, parar e resetar o cronômetro.
Código JavaScript:
// Variáveis para armazenar o temporizador e o estado do cronômetro
let temporizador;
let emExecucao = false;
let [horas, minutos, segundos] = [0, 0, 0];
// Função que atualiza o display do cronômetro na tela
function atualizarDisplay() {
document.getElementById('cronometro').textContent =
`${String(horas).padStart(2, '0')}:${String(minutos).padStart(2, '0')}:${String(segundos).padStart(2, '0')}`;
}
// Função que controla o início e parada do cronômetro
function iniciarParar() {
if (emExecucao) {
// Se o cronômetro está em execução, paramos o temporizador
clearInterval(temporizador);
document.getElementById('botaoIniciarParar').textContent = 'Iniciar';
} else {
// Caso contrário, iniciamos o temporizador para incrementar os segundos a cada segundo
temporizador = setInterval(() => {
segundos++;
if (segundos === 60) {
segundos = 0;
minutos++;
if (minutos === 60) {
minutos = 0;
horas++;
}
}
atualizarDisplay(); // Atualiza o display com os novos valores
}, 1000);
document.getElementById('botaoIniciarParar').textContent = 'Parar';
}
emExecucao = !emExecucao; // Alterna o estado do cronômetro (executando/parado)
}
// Função que reseta o cronômetro para o valor inicial 00:00:00
function resetar() {
clearInterval(temporizador); // Para o temporizador
[horas, minutos, segundos] = [0, 0, 0]; // Reseta os valores
atualizarDisplay(); // Atualiza o display com os valores zerados
document.getElementById('botaoIniciarParar').textContent = 'Iniciar';
emExecucao = false; // Define o estado como parado
}
Neste código JavaScript:
- iniciarParar(): Inicia e para o cronômetro. Utiliza
setIntervalpara incrementar o tempo a cada segundo. - resetar(): Reseta o cronômetro para 00:00:00.
- atualizarDisplay(): Atualiza a exibição do tempo no formato correto.
Explicando a Lógica por Trás do Cronômetro
- Variáveis Iniciais: Usamos três variáveis para armazenar horas, minutos e segundos. Elas começam com valor 0.
- Função de Atualização: A função
atualizarDisplayatualiza a área de exibição do cronômetro formatando os valores de horas, minutos e segundos para sempre exibirem dois dígitos. - Controle do Tempo: A função
iniciarPararcontrola o início e a pausa do cronômetro, alterando o texto do botão entre “Iniciar” e “Parar”. - Resetando o Cronômetro: A função
resetarpara o cronômetro e redefine os valores para zero.
Melhorando o Cronômetro JavaScript
Se você quiser melhorar esse cronômetro, pode adicionar outras funcionalidades:
- Um botão para marcar “laps” (voltas).
- Animações CSS nos botões.
- Um contador reverso (um temporizador regressivo).
Conclusão
Criar um cronômetro JavaScript é uma excelente maneira de praticar suas habilidades com HTML, CSS e JavaScript. Com este tutorial, você aprendeu a criar um cronômetro simples e bonito, que pode ser usado em diversos projetos. Agora, experimente adicionar novas funcionalidades ou estilos e veja até onde pode levar esse projeto!
Não deixe de continuar praticando com mais projetos e, se gostou deste tutorial, compartilhe com outros desenvolvedores iniciantes que também queiram aprender mais sobre JavaScript!
