[JS] Mostrar fecha y hora actual (completa)
Cómo mostrar fecha y hora actual usando JavaScript
📅 Ventajas y usos de esta plantilla
- Muestra fecha y hora actual con formato completo
- Incluye día de la semana (Monday, etc.)
- Fácil de integrar en sitios o blogs
- Ideal para principiantes que aprenden JavaScript
📋 Código listo para copiar y pegar
<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áctico y aplicaciones
Esta plantilla utiliza setInterval(() => {...}, 1000) para actualizar en tiempo real la fecha y hora actuales cada segundo. Obtiene el año, mes, día y día de la semana mediante métodos como getFullYear() y getDay(). Al incluir el día de la semana junto con la fecha y hora, la información mostrada es más completa y fácil de entender.
El día de la semana se determina con getDay() y se traduce utilizando el arreglo dayNames[], que muestra el nombre del día en inglés. Puedes cambiarlo fácilmente a japonés, por ejemplo: ["日","月","火","水","木","金","土"].
📌 Aplicaciones en el mundo real
Este código puede usarse en diversos contextos como tablones informativos escolares, cuentas regresivas para eventos o mostrar el horario comercial de una tienda. Ajustando los estilos CSS, también puede servir como una señalización digital atractiva.
Además, como funciona según la hora local del usuario, es ideal para sitios web internacionales o aplicaciones que requieren mostrar la hora según la zona horaria.