¿Como hacer que nuestra web cambie dependiendo de la hora del día?
En ocasiones pude ser interesante hacer que nuestra web se vea distinta por el día y por la noche. Para ello solo tenemos que crear dos Hojas de estilo (CSS) y hacer que dependiendo de la hora la web cargue una o otra.
Para ello disponemos del siguiente script muy sencillo:
-
<link rel="stylesheet" href="<?php $hour = date("H"); if ($hour <= 5) echo "css/noche.css"; elseif ($hour>= 6 AND $hour <= 19) echo "css/dia.css"; elseif ($hour>= 20) echo "css/noche.css"; else echo "css/white.css"; ?>" type="text/css" />
Explicación:
Lo primero que se hace es crear la variable $hour que almacena la hora del servidor. Luego, por medio del uso de condicionales vamos definiendo las diferentes hojas de estilo.
Concretamente el código anterior establece que la hoja de estilo sea noche.css desde las 8 p.m. hasta las 5 a.m. y el resto de horas del día se cargara la hoja dia.css.
Actualización: Carlos nos propone una opción mucho mejor. Yo me hice la picha un lio cuando escribí esta noticia. Aunque ambos funcionan esta opción es más sencilla y compacta.
-
<link rel="stylesheet" href="<?php $hour = date("H"); if ($hour>= 6 AND $hour <= 19) echo "css/dia.css"; else echo "css/noche.css"; ?>" type="text/css" />
Hola,
para este caso no es necesario utilizar tantas condicionales. Se puede compactar mucho más el código con una condicional simple y evitar más comparaciones:
<link rel=”stylesheet” href=”= 6 AND $hour ” type=”text/css” />
Como nota adicional, la función date() devuelve la hora del servidor, no la del cliente, por lo que el objetivo de la condición (modificar la css según la hora) sólo será exitoso cuando el servidor y el cliente se encuentren en la misma zona horaria.
Un saludo
Disculpa, la condicional sería:
if ($hour>= 6 AND $hour <= 19) echo “css/dia.css”; else echo “css/noche.css”;
@Carlos claro tienes razón que estúpido por mi parte cogí un código que estaba pensado para añadir tres hojas de estilo y simplemente lo modifiqué un poco para añadirlo en el blog. Tu opción es mucho mejor, si no te importa editaré la entrada añadiendola.
Gracias