fbpx

Javascript Desativado!

É necessário ativar o javascript do seu navegador para acessar!

Como criar um relógio digital com HTML, CSS e Javascript - Evertec Digital

Como criar um relógio digital com HTML, CSS e Javascript

Nesse tutorial iremos mostrar como criar um relógio digital utilizando apenas HTML, CSS e JavaScript puro, de um jeito fácil e rápido para você utilizar em seus projetos.

Como criar um relógio digital com HTML, CSS e Javascript
0296
Compartilhe esse conteúdo!

Só um lembrete rápido, o Javascript irá pegar o horário da máquina do cliente e não o horário do seu servidor. Então, essa solução é muito útil para você apresentar o horário certo para os visitantes do seu projeto no horário do local que ele está, desde que, o horário da máquina do seu cliente, esteja correto.

Hora de por a mão na massa!

Construindo um relógio digital com HTML, CSS e Javascript

Iremos criar o nosso relógio digital em apenas 3 simples passos, um para cada arquivo do seu projeto.

O primeiro passo é criar a tag em HTML no seu documento. Aqui utilizaremos a tag <time>. Iremos iniciar a tag com uma hora fictícia, apenas para podermos estilizar:

<time>12:00:00</time>
O segundo passo é estilizar a tag de acordo com o que você desejar:
time{
  border: 1px solid #f7f7f7;
  padding: 4px 12px;
  baclground-color: black;
  color: #f7f7f7;
  font-size: 2em;
  font-weight: 300;
  border-radius: 4px;
}
O terceiro passo é criar a função em Javascript, para identificar a hora da máquina do cliente e exibir na tag para o visitante do site:
const showTimeNow = () =>{

//Selecinando a tag de destino
  const clockTag = document.querySelector('time');
  
//Instanciando a classe Date
  let dateNow = new Date();

//pegando os valores desejados
  let hh = dateNow.getHours();
  let mm = dateNow.getMinutes();
  let ss = dateNow.getSeconds();
  
//validando a necessidade de adicionar zero na exibição
  hh = hh < 10 ? '0'+ hh : hh; 
  mm = mm < 10 ? '0'+ mm : mm; 
  ss = ss < 10 ? '0'+ ss : ss; 
   
// atribuindo os valores e montando o formato da hora a ser exibido
  clockTag.innerText = hh +':'+ mm +':'+ ss;
}

//executando a funcao a cada 1 segundo
showTimeNow()
setInterval(showTimeNow, 1000);

Simples assim! Seu relógio digital já está pronto. Agora você já pode apagar a hora que colocamos na tag <time> que utilizamos para fazer a estilização.

Customize o estilo como desejar!

Projeto completo no Codepen

See the Pen
Relógio Digital – Digital Clock
by Evertec Digital (@EvertecDigital)
on CodePen.

Explicando o código Javascript

Criamos uma função executando os seguintes passos:

  1. Selecionamos a tag de destino “time” com o querySelector;
  2. Instanciamos a classe Date nativa do javascript em uma variável;>
  3. Pegamos os parâmetros de hora, minutos e segundos necessárias para o nosso objetivo e armazenamos em suas respectivas variáveis
  4. Utilizamos a validação ternária para adicionar ou não o zero na frente do número, caso o mesmo seja inferior a 10;
  5. Por fim, utilizamos o innerText para colocar os valores atualizados de volta dentro da tag selecionada.

Ao final, utilizamos o setInterval para executar a função a cada segundo (1000).

E ai dev, o que achou desse tutorial de como criar um relógio digital com javascript?


Compartilhe esse conteúdo!

Conheça nossos cursos

Cursos de Desenvolvimento Web para você elevar ainda mais as suas habilidades profissionais!

Conheça nossos cursos

Conteúdos Relacionados

Veja alguns conteúdos que também podem lhe interessar.

Mais Populares

Veja os nossos conteúdos mais acessados.