DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
25-08-2014

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 

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


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

anime.js librería para animaciones en JavaScript

anime.js librería para animaciones en JavaScript

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Algunos artículos que te pueden interesar

Cómo crear anillos de circulos en JavaScript y Canvas

Cómo crear anillos de circulos en JavaScript y Canvas

En esta entrada veremos cómo crear un sistema sencillo de anillos de círculos con Canvas y JavaScript; para esto se hará uso de la función requestAnimationFrame() y animar el Canvas.

Andrés Cruz 16-11-2015

Cómo cargar y reproducir videos de YouTube de manera programatica con JavaScript

Cómo cargar y reproducir videos de YouTube de manera programatica con JavaScript

Se explica como emplear la API de YouTube para JavaScript para controlar el estado de los videos de YouTube en nuestra web.

Andrés Cruz 01-05-2017

Cómo capturar videos desde la cámara con PhoneGap

Cómo capturar videos desde la cámara con PhoneGap

Andrés Cruz 08-05-2017