¿Cómo cambiar el color progresivamente según la hora con JavaScript?

- Andrés Cruz

In english

Ver demo

En esta entrada veremos como cambiar el color de algún elemento de una página web según la hora del día (en este caso cambiaremos el color de fondo del body) con un simple JavaScript.

Creando la función para cambiar el color según el hora del día (JavaScript)

Crearemos una función llamada MostrarTiempoColor() cuyo contenido será el siguiente:

Primero creamos un objeto de tipo Date() para obtener la hora actual (hora, minutos y segundo):

d = new Date();
h = d.getHours();
m = d.getMinutes();
s = d.getSeconds();

Esta sección de código JavaScript permite convertir un número (la hora, minuto y/o segundo) de una sola cifra a dos; agregandoles un cero adelante según sea el caso; de esta forma poder formar un hexadecimal compuesto de seis dígitos sin importar la hora; como podemos ver, los números a tratar corresponden a la hora actual (la hora, minuto y segundo):

if(h <= 9) h = '0'+h;
if(m <= 9) m = '0'+m;
if(s <= 9) s = '0'+s;

Generamos el color combinando la hora, los minutos y segundos:

color = "#"+h+m+s;

Cambiamos el color de fondo de algún elemento; en nuestro ejemplo, el color del mismo documento HTML:

document.body.style.background = color;

Insertamos el código del color hexadecimal generado anteriormente:

document.getElementById("hexadecimal").innerHTML = color;

Invocamos a la función ya definida cada segundo con el método provisto por JavaScript llamado setTimeout; lo que significa actualizamos el color de fondo cada segundo:

setTimeout(MostrarTiempoColor, 1000);

Enlace de Interés

Resultado Final

 

Ver demo

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy