¡Hola, developah! 😉
Una de las primeras cosas, y más básicas, que se suele hacer en JavaScript, es acceder a los elementos del tiempo para obtener la fecha actual: saber qué hora es, poner el año en curso en el footer, etc.
En JS, para realizar esta tarea en cuestión, disponemos del Objeto Date.
Para trabajar con él, lo primero que haremos será crear una instancia usando la palabra reservada new con el siguiente código:
const date = new Date();Una vez hecho esto, en la constante date ya tenemos acceso al siguiente listado con los métodos que ofrece el objeto Date:
- getDate() // Obtiene el día como un número (1-31).
- getMonth() // Obtiene el mes como un número (0-11). ¡OJO! Aquí debemos sumar 1 para que nos coincida con el valor real.
- getFullYear() // Obtiene el año como un número de cuatro dígitos (aaaa).
- getHours() // Obtiene la hora como un número (0-23).
- getMinutes() // Obtiene los minutos como un número (0-59).
- getSeconds() // Obtiene los segundos como un número (0-59).
- getMilliseconds() // Obtiene los milisegundos como un número (0-999).
- getDay() // Obtiene el día de la semana como un número (0-6).
Existen más métodos, pero con estos ya tenemos más que suficiente para nuestro día a día.
// Instanciamos el objeto Date, usando la palabra reservada new, en la constante date.
const date = new Date();
// Asignamos los valores que obtenemos de cada método en constantes.
const day = date.getDate();
const month = date.getMonth() + 1;
const fullYear = date.getFullYear();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();Ya empieza a coger color nuestro código. Ahora en un documento .html, añadimos el código donde se va a mostrar nuestro reloj.
Crear un Reloj en JavaScript
// Creamos un elemento div con el id clock al que accederemos mediando JS.
<div id="clock"></div>// Instanciamos el objeto Date, usando la palabra reservada new, en la constante date.
const date = new Date();
// Asignamos los valores que obtenemos de cada método en constantes.
const day = date.getDate();
const month = date.getMonth() + 1;
const fullYear = date.getFullYear();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
// Accedemos al elemento div.clock mediante el método getElementById del Objeto
const clock = document.getElementById('clock');
// Modificamos el contenido de div.clock con la propiedad innerHTML usando la interpolación de variables
clock.innerHTML = `${day}/${month}/${fullYear} ${hours}:${minutes}:${seconds}`;¡Y con esto ya tendríamos nuestro reloj! 👏 Oh, wait! No se mueve…
Vamos a solucionar este problema creando una función y con el método setInterval(), que acepta dos parámetros: la función a ejecutar y el tiempo en milisegundos para que se vuelva a ejecutar.
// Creamos una función expresiva
const runClock = () => {
const date = new Date();
const day = date.getDate();
const month = date.getMonth() + 1;
const fullYear = date.getFullYear();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const clock = document.getElementById('clock');
clock.innerHTML = `${day}/${month}/${fullYear} ${hours}:${minutes}:${seconds}`;
};
// Ejecutamos la función cada segundo
setInterval(runClock, 1000);Y ya sólo nos quedaría hacer que se ejecute la función que acabamos de crear añadiendo el elemento script.
// Creamos un elemento div con el id clock al que accederemos mediando JS.
<div id="clock"></div>
// Añadimos elemento script e invocamos la función.
<script>
runClock();
</script>Ejemplo en vivo
See the Pen Obtener la Fecha Actual en JavaScript by José Juan Moñino Coll (@monyinet) on CodePen.
Hasta aquí tenemos un reloj funcional pero, como seguramente ya te habrás dado cuenta, mola más cuando los valores menores de 10 llevan un 0 delante.
Me lo dejo en tareas pendientes para mejorarlo 😁
Código Completo para Obtener la Fecha Actual
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crear un Reloj en JavaScript | <monyi.dev/></title>
</head>
<body>
<div id="clock"></div>
<script>
const runClock = () => {
const date = new Date();
const day = date.getDate();
const month = date.getMonth() + 1;
const fullYear = date.getFullYear();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const clock = document.getElementById('clock');
clock.innerHTML = `${day}/${month}/${fullYear} ${hours}:${minutes}:${seconds}`;
};
setInterval(runClock, 1000);
</script>
</body>
</html>
