[JS] Template de Data + Hora + Dia da Semana
Como exibir a data e hora atuais em tempo real com JavaScript
📅 Usos e Benefícios deste Template
- Exibe data e hora atuais em conjunto
- Melhora a compreensão da data com o dia da semana
- Aprenda atualização em tempo real com setInterval
- Aplicável a sinalizações digitais e quadros de avisos
📋 Código pronto para copiar e colar
<div id="datetime"></div>
<script>
setInterval(() => {
const now = new Date();
const y = now.getFullYear();
const m = (now.getMonth() + 1).toString().padStart(2, '0');
const d = now.getDate().toString().padStart(2, '0');
const h = now.getHours().toString().padStart(2, '0');
const min = now.getMinutes().toString().padStart(2, '0');
const s = now.getSeconds().toString().padStart(2, '0');
const dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const w = dayNames[now.getDay()];
document.getElementById("datetime").textContent = `${y}/${m}/${d} ${h}:${min}:${s} (${w})`;
}, 1000);
</script>
🧩 Uso prático e aplicações
Este modelo usa setInterval(() => {...}, 1000) para atualizar a data e hora atuais em tempo real a cada segundo. Ele obtém o ano, mês, dia e o dia da semana utilizando métodos como getFullYear() e getDay(). Ao exibir também o dia da semana junto com a data e hora, a informação se torna mais completa e fácil de compreender.
O dia da semana é determinado com getDay() e traduzido usando o array dayNames[], que apresenta o nome do dia em inglês. Você pode adaptá-lo facilmente para português, por exemplo: ["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"].
📌 Aplicações no mundo real
Este código pode ser utilizado em diversos contextos como murais informativos escolares, contadores regressivos para eventos ou para exibir o horário de funcionamento de uma loja. Com ajustes no estilo CSS, ele também pode servir como um painel digital elegante.
Além disso, como ele funciona com base no horário local do usuário, é ideal para sites multilíngues ou sistemas que requerem exibição de hora em diferentes fusos horários.