Como mostrar un reloj digital en tu página web con JavaScript

Descubre como mostrar un reloj digital en tu página web con JavaScript y totalmente personalizable a través de las hojas de estilos CSS.

En este artículo vas a ver como mostrar la fecha y hora actual en una página web de forma totalmente personalizada utilizando JavaScript.

En este caso, la fecha queda impresa de forma fija en pantalla y el reloj avanza con el secundero.

Para conseguirlo voy a utilizar la función Date que ofrece el lenguaje de programación JavaScript.

La función Date es ideal para trabajar con fechas ya que nos va a permitir conseguir el año, el mes, el día, la hora, los minutos y los segundos de una fecha dada.

En el caso del ejemplo en funcionamiento quiero mostrar la fecha y hora actual pero no solo eso. Vas a ver como el reloj corre a la misma vez que el reloj de tu computadora o reloj de mano.

Algunas aplicaciones webs requieren estar pendiente del tiempo actual y puede resultar imprescindible mostrar a los usuarios en pantalla un reloj digital con la hora actual.

Mostrar un reloj digital en marcha se puede conseguir fácilmente con JavaScript.

Contenedores HTML para la fecha y la hora

En el cuerpo de la página o dentro de la etiqueta <body> puedes agregar, allí donde quieras, el contenedor con la fecha y la hora inicialmente vacíos. Lo estaré rellenado desde el código JavaScript.

<div class="date">
    <span id="weekDay" class="weekDay"></span>, 
    <span id="day" class="day"></span> de
    <span id="month" class="month"></span> del
    <span id="year" class="year"></span>
</div>
<div class="clock">
    <span id="hours" class="hours"></span> :
    <span id="minutes" class="minutes"></span> :
    <span id="seconds" class="seconds"></span>
</div>

Con esto ya tenemos la estructura HTML que permite separar cada elemento de la fecha y la hora.

Por un lado, tenemos un contenedor que contiene:

  • El día de la semana en formato cadena. Puede ser: Lunes, Martes, Miércoles, Jueves, Viernes, Sábado o Domingo.
  • El día en formato número.
  • El mes en formato cadena: Enero, Febrero, Marzo, etc.
  • Y el año en formato número.

Después, tengo otro contenedor que contiene el reloj con:

  • Hora.
  • Minuto.
  • Segundos.

Con esta estructura me aseguro que cada elemento puede ser personalizado a través de las hojas de estilo CSS.

Función que actualiza el reloj

Ahora tan solo falta el código más interesante y el que se ejecuta cada segundo para actualizar el reloj.

Crea un archivo clock.js en incluirlo antes de la etiqueta de cierre del </body>. Como por ejemplo:

<script src="js/clock.js"></script>

Este archivo debe contener el siguiente código JavaScript:

var udateTime = function() {
    let currentDate = new Date(),
        hours = currentDate.getHours(),
        minutes = currentDate.getMinutes(), 
        seconds = currentDate.getSeconds(),
        weekDay = currentDate.getDay(), 
        day = currentDate.getDay(), 
        month = currentDate.getMonth(), 
        year = currentDate.getFullYear();
 
    const weekDays = [
        'Domingo',
        'Lunes',
        'Martes',
        'Miércoles',
        'Jueves',
        'Viernes',
        'Sabado'
    ];
 
    document.getElementById('weekDay').textContent = weekDays[weekDay];
    document.getElementById('day').textContent = day;
 
    const months = [
        'Enero',
        'Febrero',
        'Marzo',
        'Abril',
        'Mayo',
        'Junio',
        'Julio',
        'Agosto',
        'Septiembre',
        'Octubre',
        'Noviembre',
        'Diciembre'
    ];
 
    document.getElementById('month').textContent = months[month];
    document.getElementById('year').textContent = year;
 
    document.getElementById('hours').textContent = hours;
 
    if (minutes < 10) {
        minutes = "0" + minutes
    }
 
    if (seconds < 10) {
        seconds = "0" + seconds
    }
 
    document.getElementById('minutes').textContent = minutes;
    document.getElementById('seconds').textContent = seconds;
};
 
udateTime();
 
setInterval(udateTime, 1000);

He creado una función que he llamado updateTime que se encarga de recuperar la fecha actual y la separa, mediante el objeto Date, en año, mes, día, hora, minuto y segundos con el objetivo principal de poder depositar cada elemento de la fecha y hora de forma independiente en sus correspondientes contenedores que he declarado previamente en el HTML.

Otra vez he usado la filosofía de divide y vencerás.

Hay 2 datos que proceso de forma especial, que son el día y el mes.

Tengo un arreglo con los días de la semana y otro con los meses del año en formato cadena que es como me interesa mostrarlo.

Sabiendo que el objeto Date retorna el mes y el día en formato número, necesito acceder a este arreglo con este número como índice para capturar el nombre del mes y/o día que toca mostrar.

Dentro de esta función también puedes observar que estoy aplicando un pequeño ajuste a los minutos y segundos para agregarle un 0 delante cuando es menor a 10. Esto es necesario porque el getMinutes() y getSeconds() que estoy utilizando del objeto Date no agrega este 0 quedando un poco extraño el reloj. Es un detalle prescindible.

Al final de todo, hago una llamada inicial a esta función y, luego, mediante la función setInterval() ejecuto esta función de forma repetitiva cada segundo. Esto es lo que consigue que el reloj esté siempre en marcha.

El diseño o maquetación CSS lo dejo en vuestras manos.

Ver demo Descargar

Esta entrada ha sido editada el 21/08/2019.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(17 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

14 respuestas a “Como mostrar un reloj digital en tu página web con JavaScript”

  1. Emiliano dice:

    Muchísimas gracias!!!!
    Me estaba fallando con la fecha, pero el comentario de Joaquin lo resolvió: day = currentDate.getDay() por day = currentDate.getDate(), .

  2. Pablo dice:

    Buenas!!Excelente aporte! me has ayudado mucho con el contenido de tu web.
    Me sumo a los comentarios de que en el sitio de prueba la fecha no se muestra correctamente…
    Hoy es 20-05-21 y muestra 04-05-21, lo probé en mi localhost para verificar y seguía mostrando la fecha errónea.
    Luego realice lo que comento Joaquín (cambiar «getDay()» por «getDate()» ) y se ajustó la fecha correctamente.
    Muchas Gracias por los aportes y por compartir el conocimiento!
    Saludos desde Argentina

  3. rodrigo dice:

    hola, la fecha esta atrasada 1 semana, sale 6 de marzo, siendo que hoy es 12 de marzo…como se arregla eso.?

  4. Chus dice:

    El comentario de Joaquín es correcto. Por favor, corrígelo. si haces clic en la demo de esta página, también sale un 0 en lugar del día del mes. Gracias.

  5. joaquin dice:

    Excelente aporte. En el archivo JS cambien day = currentDate.getDay() por day = currentDate.getDate(), eso es para que en el día no se muestre un 0 y se pueda ver el numero correcto

  6. Klaifferson dice:

    Excelente amigo, muchas gracias por el aporte. pero disculpa mi ignorancia, ¿Por qué no puedo mover el reloj de lugar, es decir colocarlo centrado o a un lado?

  7. Keli dice:

    Excelente gracias

  8. Fernando León dice:

    Y si quiero almacenar la hora actual en un input para enviarla en un form?

    Muchas gracias!!!

    • Jose Aguilar dice:

      Hola, para guardar la hora actual en un input lo más sencillo es apoyarse de php capturando la hora actual con la función date() y ponerla en el value.

  9. Geovanni dice:

    Hola es un excelente aporte me ayudo mucho, muchas gracias.

  10. Walter dice:

    Buen codigo man se agradece – por siaca provando tu campo website a ver si esta validado jejeje saludos y gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre