Linguagens para Internet

Linguagens Web

Cronômetro digital online com Javascript

Olá amigos, hoje aprenderemos a criar um cronômetro digital online com javascript de forma muito simples. Se você acha que criar um cronômetro digital é uma tarefa difícil, vai se surpreender com a simplicidade do código javascript.

Se você é familiarizado com javascript já deve estar imaginando como usaremos um intervalo de tempo para criarmos um cronômetro digital online. Ora, muito simples! Se aumentarmos um segundo no cronômetro digital a cada um segundo até chegarmos a 60 segundos, já teremos conseguido criar um minuto. Este raciocínio será o mesmo para criarmos uma hora para o nosso cronômetro digital online com javascript.

Para este nosso novo projeto utilizaremos a função setInterval() da linguagem javascript. A função setInterval(), consiste em executar determinado bloco de código em um determinado intervalo de tempo.

Veja a sintaxe da função setInterval()

1
setInterval('função_a_ser_ chamada()', tempo em milisegundos)

Para saber mais sobre a função seInterval(), clique aqui para acessar a explicação do w3schools.

Por que Cronômetro digital online?

Cronômetro porque criaremos uma espécie de relógio, mas que não marcará a hora, e sim contará um determinado tempo.

Digital porque usaremos um modelo digital, como aquele que vem no seu relógio.

E Online porque funcionará na Web. Após compreender o processo de desenvolvimento, você poderá incrementar o código e usá-lo em seu próprio site para de repente, disponibilizar um cronômetro digital online para seus usuários.

Veja na imagem como ficará o nosso cronômetro digital online:

Cronômetro Digital Online

Imagem do cronômetro que estamos criando

Vamos usar códigos de marcação, que é o nosso grande amigo HTML, códigos CSS para estilização e códigos javascript, pelo qual criaremos de fato o nosso cronômetro digital online.

Código HTML

1
2
3
4
5
6
7
<body>
   <form name="form">
      <input type="text" name="cronometro" value="00:00:00" />
      <br />
      <button type="button" onclick="setInterval('tempo()',983);return false;">Iniciar Cronômetro</button>
   </form>
</body>

Detalhando o código HTML

  • Linha 1: Tag body – corpo da página
  • Linha 2: Tag form – usamos para criar um formulário
  • Linha 3: Tag input – criamos um campo de texto. É este campo que será o nosso display para o cronômetro. Ele será estilizado de forma a ser mostrado em um tamanho considerável para o usuário
  • Linha 4: Quebra de linha. Apenas para jogarmos o botão para a próxima linha
  • Linha 5: Tag button - inicia o cronômetro digital ao ser clicado. Repare que esta tag possui o atributo onclick e seu valor chama a função setInterval que aprenderemos jajá e ainda em tempo, retorna falso. Isto impede o comportamento padrão do botão de submeter o formulário.

Vale explicar aqui o funcionamento da função setInterval(). Repare no código que no primeiro parâmetro inserimos a função a ser chamada tempo() e no segundo parâmetro inserimos o intervalo de tempo em que a função será chamada em milisegundos. Ou seja para chamarmos a função tempo() a cada um segundo, devemos declarar 1000 milisegundos. Então porque no código está atribuído 983 milisegundos? Você pode testar o código atribuindo 1000, mas perceberá, se sincronizar o cronômetro digital com o do seu relógio, que o que estamos criando será mais lento. Então após algumas contas de porcentagem cheguei ao valor de 983 milisegundos que faz com que o nosso cronômetro marque corretamente o tempo decorrido.

  • Linha 6: Fechamento da tag form
  • Linha 7: Fechamento da tag body

Código CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style type="text/css">
*{
	margin:0;
	padding:0;
	}
body{
	background:#CCC;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	}
#topo{
	background:#069;
	height:100px;
	line-height:100px;
	border-bottom:2px solid #006;
	}
h2 a{
	color:#069;
	text-decoration:none;
	}
h2 a:hover{
	color:#006;
	}
input{
	background:#ccc;
	width:600px;
	height:200px;
	line-height:200px;
	font-size:150px;
	border:none;
	}
</style>

Não vamos detalhar o código CSS por fugir um pouco o propósito do artigo. Entenda apenas que o CSS vai estilizar os elementos na página.

Código Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript" language="JavaScript">
var segundo = 0+"0";
var minuto = 0+"0";
var hora = 0+"0";
 
function tempo(){	
   if (segundo < 59){
      segundo++
      if(segundo < 10){segundo = "0"+segundo}
   }else 
      if(segundo == 59 && minuto < 59){
         segundo = 0+"0";
	minuto++;
	if(minuto < 10){minuto = "0"+minuto}
      }
   if(minuto == 59 && segundo == 59 && hora < 23){
      segundo = 0+"0";
      minuto = 0+"0";
      hora++;
      if(hora < 10){hora = "0"+hora}
   }else 
      if(minuto == 59 && segundo == 59 && hora == 23){
         segundo = 0+"0";
	minuto = 0+"0";
	hora = 0+"0";
      }
   form.cronometro.value = hora +":"+ minuto +":"+ segundo
}
</script>

Detalhando o código javascript

  • Linha 1: Inicia o bloco de script
  • Linha 2: Inicia a variável global segundo atribuindo a ela o valor 0 (zero). Repare que é atribuído um número concatenado com outro número dentro de uma string, neste caso uma string de valor 0 (zero). O Objetivo é iniciar os segundos do cronômetro digital em 00 (zero zero)
  • Linhas 3 e 4: O mesmo da linha 2 só que minutos e horas
  • Linha 6: Iniciamos a função que será chamada pelo botão criado lá no código HTML. Para este artigo a função se chama tempo()
  • Linha 7: Se a nossa variável segundo for menor que 59, ou seja, for de 58 para baixo, o sistema executa o bloco de código
  • Linha 8: Se a condição acima for verdadeira o sistema vai incrementar o valor de variável em 1, isto é, pega o valor da variável segundo, soma + 1 e atribui o resultado como novo valor da variável segundo
  • Linha 9: Se o valor da variável segundo for menor que 10, ou seja, for entre 0 e 9, atribui mais um zero à esquerda para manter dois dígitos nos segundos (Ex.: 01, 02, 03, … 09)
  • Linha 10: Se a condição acima não for verdadeira e…
  • Linha 11: Se a variável segundo for igual a 59 e a variável minuto for menor que 59 executa o bloco de código abaixo
  • Linha 12: Atribui o valor 00 para a variável segundo, já que um minuto tem 60 segundos
  • Linha 13: Incrementa a variável minuto em mais 1. Estão entendendo a dinâmica do raciocínio? Toda vez que chegarmos a 59 segundos, nosso sistema vai zerar os segundos e aumentar um minuto
  • Linha 14: Se a variável minuto for menor que 10 acrescenta um zero à esquerda para manter os dois dígitos
  • Linha 15: Fechamos o bloco de código
  • Linha 16: Se a variável segundo for igual a 59 e a variável minuto for igual a 59 e a variável hora for menor que 23 (pois vamos limitar nosso cronômetro digital em 24 horas), executa o código abaixo
  • Linhas 17, 18 e 19: Zera os segundos, zera os minutos e incrementa a hora em mais 1. Ficou claro? Usamos o mesmo raciocínio quando zeramos apenas os segundos para incrementar os minutos.
  • Linha 20: Se a variável hora for menor que 10, acrescentamos um zero à esquerda para garantir os dois dígitos
  • Linha 21: Senão…
  • Linha 22: Se minuto for igual a 59 e segundo for igual a 59 e hora for igual a 23, significa que nosso cronômetro digital chegou a 24 horas e o sistema executa o código abaixo
  • Linhas 23, 24 e 25: Zera os segundos, os minutos e as horas.
  • Linha 26: Fechamos o bloco de código
  • Linha 27: Usamos o DOM do javascript para recuperar o nosso input (nosso campo de texto) e atribuímos como seu valor (value) uma concatenação entre a variável hora mais dois pontos mais a variável minuto mais dois pontos mais a variável segundo, formando um cronômetro digital online no seguinte formato (00:00:00)
  • Linha 28: Fechamos a função
  • Linha 29: Fechamos a tag script

A função tempo será chamada a cada um segundo, através da função do javascript setInterval. Isto é o que dará vida ao nosso cronômetro digital.

exemplo centralizar imagem Veja um exemplo em funcionamento clicando aqui

download Faça download do arquivo clicando aqui

Nos próximos artigos poderemos incrementar este código de forma a inserir botões para parar o cronômetro digital, capturar parciais e impimi-las na tela, e até mesmo zerar o cronômetro.

Conseguiram observar a simplicidade do código? Não há nada muito complicado. Considero que não é necessário nem mesmo conhecer javascript para implementar o cronômetro, pois ele é todo baseado na condição if. Se isso for verdadeiro faz uma coisa, senão, faz outra.

Bom pessoal, espero que este Cronômetro digital online com javascript seja de utilidade para aqueles que procuram algo do tipo. Até a próxima!

, , ,

Um comentário para “Cronômetro digital online com Javascript

  • Nuno disse:

    Boas,
    Gostei bastante do seu trabalho e deu me bastante ajuda para conseguir colocar o tempo a contar num jogo da memoria que estou a realizar, será que podia dar me uma ajuda em como colocar um botao para pausar e parar o cronometro?

    Obrigadao, abraço
    Nuno

Deixe uma resposta para Nuno Cancelar resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>