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

25-08-2014 - Andrés Cruz

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

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!