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>
time{
border: 1px solid #f7f7f7;
padding: 4px 12px;
baclground-color: black;
color: #f7f7f7;
font-size: 2em;
font-weight: 300;
border-radius: 4px;
}
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:
- Selecionamos a tag de destino “time” com o querySelector;
- Instanciamos a classe Date nativa do javascript em uma variável;>
- Pegamos os parâmetros de hora, minutos e segundos necessárias para o nosso objetivo e armazenamos em suas respectivas variáveis
- 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;
- 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?
