Aprenda a Criar um Cronômetro usando JavaScript – Tutorial de JavaScript para Iniciantes

Posted by

Aprenda a Programar um Cronômetro com JavaScript

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

  1. Crie um arquivo HTML com a estrutura básica.
  2. Adicione os elementos HTML necessários para exibir o cronômetro (por exemplo, um que mostrará os segundos).
  3. Crie uma função em JavaScript para iniciar o cronômetro e atualizar o tempo a cada segundo.
  4. Adicione botões HTML para iniciar, pausar e resetar o cronômetro.
  5. 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.

0 0 votes
Article Rating
33 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@MatheusBattisti
5 months ago

⭐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

@lucier7450
5 months ago

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.

@odirleimachado6060
5 months ago

bom dia meu código não está iniciando

Já revisei e vou revisa novamente

@kidloko5689
5 months ago

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 🙏

@gabrielmessiasgg
5 months ago

se você iniciar depois pausar e depois resetar(resetar com ele pausado),ele nao inicia mais

@antoniopereira2721
5 months ago

O conteúdo gratuito é ótimo e o pago é insano de bom! Gratidão 🙏🙏🙏.

@lokinho851
5 months ago

O meu funciona de início, mas se iniciar e pausar depois resetar ai nao inicia mais.

@midari8427
5 months ago

Ó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

@user-xy1jc2dx2m
5 months ago

Uncaught TypeError: Cannot read properties of null (reading 'style')
at HTMLButtonElement.pauseTimer como resolver

@Striker-ES
5 months ago

incrivel

@lauropjdutra
5 months ago

Sensacional a aula, me ajudou bastante. Muito obrigado, Matheus!

@eo5544
5 months ago

como faz pra ao abrir a tela, o cronometro ficar automatico, n precisar clicar?

@kawamsx1002
5 months ago

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

@frankguitarr
5 months ago

Mano eu que estou começando foi difícil kkkk levei uns três dias mas conseguir kkkkk

@tatysempretaty21
5 months ago

Excelente!!!! Parabéns.😊

@aldobelocanalgospel4195
5 months ago

Eu consegui fazer muito bem 👏👏👏

@Regis_TradingHorse
5 months ago

Muito Top Matheus!

@danielahoffmann3426
5 months ago

O jeito de falar parece catarinense kkk, é?

@BrunoAlves-jv8zi
5 months ago

Excelente, Matheus!

@Suellen1608
5 months ago

Achei bem inteligente a função de retornar o tempo formatado usando ternário. =]