Trabajando con fechas en JavaScript

Un florista me pidió que creara una función donde el color de fondo del sitio cambiara según las horas del día. Veamos cómo podemos encontrar la hora del día y cambiar el CSS todo esto usando JavaScript.

Trabajando con fechas y horas

JavaScript tiene la clase Date que nos permite trabajar con fechas y horas. Si llamamos al constructor Date sin parámetros:

const horas = new Date();
console.log( horas );

Pudimos obtener la fecha y hora actual:

Lun Nov 01 2021 13:51:03 GMT-0300 (Brasília Standard Time)

Genial, solucionamos una pequeña parte del problema que consistía en cómo tomar la fecha y la hora, ahora intentemos ser más específicos y solo encontrar las horas del día.

Encontrando las horas

Como Date es una clase, tiene un método para ayudarnos a encontrar las horas como el método .getUTCHours()

const hoy = new Date();
console.log( hoy.getUTCHours() );

Logramos ser muy específicos y encontrar solo las horas, el problema era que el número que teníamos de retorno fue 15 y el día que ejecuté este código eran exactamente las 13:00 horas, por lo que el retorno debería haber sido 13 y no 15. Qué sucedió ?

Solucionando el problema de las horas

Logramos tomar la hora del día, ¡pero está saliendo mal! El problema de la hora encontrada no ser la hora real ocurrió porque el método getUTCHours() está trayendo la hora UTC (Tiempo Universal Coordinado). Para solucionar esta situación, usemos el método getHours de la clase Date

const horas = new Date();
console.log( horas.getHours() );

Ambos métodos aportan solo las horas, la diferencia es que getHours()retorna la hora local.

Cuando ejecuté el script, la hora que retornó fue 13. Se ha resuelto una parte del problema, ahora veamos cómo cambiar el color de fondo del sitio web usando JavaScript.

Cambiando los colores según las horas

Actualmente el color de fondo del sitio es amarillo, lo que quiero es que sea azul a partir de las 16:00. Con JavaScript pudimos cambiar el color de fondo de la página usando selectores CSS.

const contenido = document.querySelector(".colordefondo");
contenido.style.background = "#fed02e";

Cambiando CSS con JavaScript

Ahora que sabemos cómo obtener la hora del día y cómo cambiar el color de fondo de una página, creemos un script con la ayuda de if para cambiar la hora

const now = new Date;
const tiempo = now.getHours();
if( tiempo < 16 ) {
  const contenido = document.querySelector(".container");
 
  contenido.style.background = "#fed02e";
    
 } else {
  const contenido = document.querySelector(".container");
  contenido.style.background = "#1000ff";
}

Para saber más

Además de invocar el constructor sin parámetro, hay otras formas de encontrar la fecha y la hora utilizando el objeto Date

Pasando el valor de la fecha a milisegundos. Según la documentación del developer mozilla, la Fecha de JavaScript se basa en el valor de tiempo en milisegundos desde la medianoche del 1 de enero de 1970, UTC.

Con un día correspondiendo a 86.400,000 milisegundos (esta parte es del texto de mozilla)

const horas = new Date(5000000000000);
console.log( horas );

Obtenemos como respuesta:

2128-06-11T08: 53: 20.000Z

Pasando el día, mes y año como parámetro, recordando que, en esta notación, el mes de enero es 0:

const horas = new Date(2015,10,1);
console.log( horas );

Obtenemos como respuesta:

2015-11-01T02: 00: 00.000Z

Pasando una string como parámetro del constructor:

const horas = new Date("2015/10/1");
console.log( horas );

Obtenemos como respuesta:

2015-10-01T03: 00: 00.000Z

Métodos y funciones útiles en JavaScript

Si estás interesado en cómo funciona Javascript y cómo puedes usarlo mejor, aquí en Alura tenemos una formación front-end. Ahí verás cómo programar en Javascript, utilizar expresiones regulares, entre otras cosas.

Felipe Nascimento

Desarrollador e instructor en Alura con enfoque en JavaScript.