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:
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.
Esta entrada ha sido editada el 21/08/2019.
Muchísimas gracias!!!!
Me estaba fallando con la fecha, pero el comentario de Joaquin lo resolvió: day = currentDate.getDay() por day = currentDate.getDate(), .
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
Que raro. Ese código está fallando ahora. Si alguien tiene una solución. Lo agradecería.
hola, la fecha esta atrasada 1 semana, sale 6 de marzo, siendo que hoy es 12 de marzo…como se arregla eso.?
Hola,
Me gustaría ver tu código para confirmarlo. El sitio de demostración parece estar bien.
Saludos
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.
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
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?
Hola,
Para cambiarlo de lugar puedes editar los estilos. El atributo position:absolute; quizá lo debes quitar.
Saludos
Excelente gracias
Y si quiero almacenar la hora actual en un input para enviarla en un form?
Muchas gracias!!!
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.
Hola es un excelente aporte me ayudo mucho, muchas gracias.
Buen codigo man se agradece – por siaca provando tu campo website a ver si esta validado jejeje saludos y gracias