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

• Artículo creado a partir de este ejemplo.

Resultado Final

 

Ver demo