Javascript para cambiar el css dependiendo la hora del día.

Publicado por admin en

Compartir:

Buscando en internet una forma de cambiar de hoja de estilos(CSS) dependiendo de la hora del día, encontre varios desarrollandos en php.  Probando con el php cambie la extención de mi archivo html, pero el script no funciono muy bien que digamos.

Así que me propuse a programar uno, no soy experto en programación, mi experiencia en programación es en Actionscript de flash.  Pero bueno investigando un poco encontre la manera de hacer el cambio con el siguiente script:

La idea es la siguiente:

Creamos un objecto new Date() que este caso se llama cambioDia. Esto nos permite acceder a los métodos de este objecto.

El método getHours() devuelve la hora del día actual como un entero entre 0 y 23.  El método getMinutes() devuelve los minutos de la hora actual como un entero entre 0 y 59.

Estos valores son guardados en dos variables respetivas hora y minutos, luego armamos el tiempo, concatenando las horas y minutos, pero para separarlos utilizamos un «.»  para que forme una valor numerico válido. ej: 0.59 para indicar que son las 12:59 am. o las 21.30 para indicar las 9:30 a.m.

Validamos si la variable tiempo es mayor o igual que 19.0, osea si es mayor  o igual a las 7:00 p.m.  y menor a 23.59, también en la misma línea validamos si tiempo es mayor o igual a 0.0 y menor a 5.59.

Luego escribimos en el documento la línea del CSS que debe llamar si es de noche.  para este caso la línea que imprime es: <link rel=’stylesheet’ type=’text/css’ href=’css/noche.css’ />.  Nota: debe crear los estilos de sitio de día o de noche en hojas separadas.  ej: dia.css y noche.css

También validamos si «tiempo» es mayor a 6.0 y menor a 18.59, aquí tenemos las horas del día definidas, para imprimir el documento el estilo que utilizaremos para estas horas: <link rel=’stylesheet’ type=’text/css’ href=’css/dia.css’ />.

Finalizamos con un «else» para evitar que si no se cumple ninguna de las opciones anterior (osea que halla un tiempo sin contemplar) el sitio no se quede sin estilos y definimos como estilos el dia.css.

Este script debemos colocar entre el tag <head></head> del documento HTML.

Le agradezco su tiempo y espero que le funcione muy bien… recuerde ustedes puede modificarlo a su gusto, incluso mejorarlo.

Categorías: javascript