Cambiar color de fondo de un sitio web de acuerdo a la hora con jQuery

miércoles, febrero 29, 2012
COMPARTE EL POST

Cambiar color de fondo de un sitio web de acuerdo a la hora con jQueryEl tutorial de hoy es muy corto, pero considero que les será de mucha utilidad. Lo que vamos a hacer es una pequeña función que nos cambie el color de fondo de acuerdo a la hora que tengamos, es decir, si son las 11 de la mañana que el fondo de la página sea azul, si son las 8 de la noche que sea azul oscuro o negro, esa es la idea.

Todo surge por una sugerencia para ver si se podría lograr este efecto, y la verdad es que es sólo cuestión de jugar con el objeto Date en Javascript, pero ahora lo vamos a hacer usando jQuery, simplificando todo todavía más. Entonces no se pierdan el tutorial de cambiar el color de fondo de un sitio web de acuerdo a la hora con jQuery.

jQuery

Realmente no tiene caso, o no le veo caso poner un ejemplo de este tutorial porque el código es tan fácil y sencillo que a menos que no sepas ni siquiera de lo que trata este blog no sabrás cómo se hace. Entonces, el código es el siguiente:

Lo que podrías hacer es cambiar la hora en la condición, eso con javascript, y como podemos ver con jQuery lo que hacemos es añadir la clase que queramos de acuerdo a nuestras preferencias.

CSS

Para la hoja de estilos definimos en este caso tres: una para el día, otra para la tarde, y otra para la noche.

En este caso lo que hago es sólo cambiar el color de fondo para ver la demostración más sencilla, ya depende de ustedes colocar todas las personalizaciones que ustedes quieran ponerle, a su gusto y preferencia.

¡Síguenos en Twitter!


Deja tu comentario