Projeto de JavaScript para iniciantes
Neste projeto de JavaScript, vamos aprender a programar um cronômetro simples utilizando JavaScript puro. Este é um exercício ideal para iniciantes que desejam praticar seus conhecimentos básicos de JavaScript.
Passo a passo
- Crie um arquivo HTML com a estrutura básica.
- Adicione os elementos HTML necessários para exibir o cronômetro (por exemplo, um que mostrará os segundos).
- Crie uma função em JavaScript para iniciar o cronômetro e atualizar o tempo a cada segundo.
- Adicione botões HTML para iniciar, pausar e resetar o cronômetro.
- Teste o seu cronômetro e faça os ajustes necessários.
Código de exemplo
<html>
<head>
<title>Cronômetro</title>
</head>
<body>
<h1><span id="cronometro">00:00:00</span></h1>
<button onclick="startClock()">Iniciar</button>
<button onclick="pauseClock()">Pausar</button>
<button onclick="resetClock()">Reiniciar</button>
<script>
let seconds = 0;
let minutes = 0;
let hours = 0;
let interval;
function startClock() {
interval = setInterval(updateClock, 1000);
}
function pauseClock() {
clearInterval(interval);
}
function resetClock() {
clearInterval(interval);
seconds = 0;
minutes = 0;
hours = 0;
document.getElementById("cronometro").innerHTML = "00:00:00";
}
function updateClock() {
seconds++;
if (seconds == 60) {
seconds = 0;
minutes++;
}
if (minutes == 60) {
minutes = 0;
hours++;
}
document.getElementById("cronometro").innerHTML = ("0" + hours).slice(-2) + ":" + ("0" + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2);
}
</script>
</body>
</html>
Este é apenas um exemplo básico de um cronômetro em JavaScript. Sinta-se à vontade para personalizar e melhorar o código conforme necessário. Pratique e experimente novas funcionalidades para aprimorar suas habilidades em JavaScript.
⭐Conheça a Formação Front-end (+50 de horas de conteúdo, +20 de projetos) para você se tornar um dev front-end: https://www.udemy.com/course/formacao-front-end-html-css-javascript-react-e/?couponCode=LANCOUFE
Que top! Uma observação,, quando fizerem o reset do cronômetro coloquem "isPaused = false;" também, se não haverá um bug se fizer assim: INICIAR, PAUSAR, RESETAR , INICIAR (o contador não iniciará, a menos que você PAUSE e CONTINUE), a saída é atribuir false ao isPaused quando resetar novamente.
bom dia meu código não está iniciando
Já revisei e vou revisa novamente
Alguém consegue me explicar sobre a variável isPaused? Ele fez uma verificação com o operador NOT, mas o operador de negação inverte o valor false para true, sendo que a variável é false. Então na minha cabeça não era pra passar por esse if.
Não consegui entender bem isso, e como essa variável isPaused funciona no projeto, se alguém puder me ajudar agradeço 🙏
se você iniciar depois pausar e depois resetar(resetar com ele pausado),ele nao inicia mais
O conteúdo gratuito é ótimo e o pago é insano de bom! Gratidão 🙏🙏🙏.
O meu funciona de início, mas se iniciar e pausar depois resetar ai nao inicia mais.
Ótima aula para treinar Java script, vim aqui comentar no seu vídeo pq acabei de terminar o cronometro e adorei sua didática. Na parte do css quando o senhor foi por o background a coloração ficou incompleta na tela e ai o senhor usou um " height: 100vh; ", quando eu fui por minha leta ficou com aquela barrinha de scrollar pra baixo, então mudei a cor do background pelo body e deu tudo certo, muito obrigada Matheus o senhor me ajudou muito
Uncaught TypeError: Cannot read properties of null (reading 'style')
at HTMLButtonElement.pauseTimer como resolver
incrivel
Sensacional a aula, me ajudou bastante. Muito obrigado, Matheus!
como faz pra ao abrir a tela, o cronometro ficar automatico, n precisar clicar?
fazendo alguns testes quando vc pausa e reinicia pausado ai quando dou p play dnv nao funciona eu tennho que pausa e resumir para voltar, alguem pode me ajudar a resolver
Mano eu que estou começando foi difícil kkkk levei uns três dias mas conseguir kkkkk
Excelente!!!! Parabéns.😊
Eu consegui fazer muito bem 👏👏👏
Muito Top Matheus!
O jeito de falar parece catarinense kkk, é?
Excelente, Matheus!
Achei bem inteligente a função de retornar o tempo formatado usando ternário. =]