Mostrar fecha y hora en el título

Este script permite mostrar la fecha y hora actual en la barra de título del navegador, actualizándose en tiempo real. Es una funcionalidad sencilla pero útil para sitios donde deseas resaltar la hora, como en paneles administrativos, dashboards o páginas informativas.

¿Cómo funciona?

El código utiliza JavaScript para obtener la hora del sistema y actualizar el título (document.title) cada segundo. Así, el usuario siempre verá la hora actual en la pestaña del navegador.

Código básico:

<script>
function actualizarTitulo() {
    const ahora = new Date();
    const fechaHora = ahora.toLocaleString(); // Formato local
    document.title = fechaHora + " | DJC";
}
setInterval(actualizarTitulo, 1000);
actualizarTitulo(); // Llamada inicial
</script>

¿Cómo usarlo?

  1. Copia el script anterior.
  2. Pégalo dentro de la etiqueta <head> o justo antes de </body> en tu página.
  3. Guarda los cambios y recarga la página: verás la fecha y hora actual en la pestaña del navegador.

Posibles mejoras y personalización

  • Formato personalizado:
    Puedes mostrar solo la hora o cambiar el formato utilizando toLocaleTimeString() o Intl.DateTimeFormat:

    const hora = ahora.toLocaleTimeString(); // Solo hora

  • Agregar zona horaria:
    Para proyectos internacionales, se puede mostrar la hora con zona horaria específica:

    const opciones = { timeZone: 'America/Lima', hour12: false };
const hora = ahora.toLocaleString('es-PE', opciones);

  • Agregar un título fijo antes o después:
    Si quieres que siempre aparezca un nombre y luego la hora:

    document.title = "Panel DJC | " + fechaHora;

¿Para qué es útil?

  • Páginas abiertas por mucho tiempo: Los usuarios pueden saber la hora sin cambiar de pestaña.
  • Dashboards y sistemas internos: Refleja la hora exacta del sistema.
  • Sitios informativos o educativos: Aporta un toque dinámico a la interfaz.

Próximos scripts relacionados:

  • Mostrar contador regresivo en el título.
  • Agregar notificaciones dinámicas junto con la hora.
  • Cambiar el color del favicon según la hora del día.