Cargar CSS de acuerdo a la hora del día (alternar noche/día)

Cergath · 17 Febrero 2011, 01:33 AM

Hola,

Me gustaría saber de algún método para hacer que un sitio web cargue un CSS (O una imagen) diferente de acuerdo a la hora del día, y que, por ejemplo, cargue una imagen con entorno nocturno a partir de las 6:00pm de la tarde. ¿Es eso posible?, ¿Cómo lo podría hacer?.

Gracias

#!drvy · 17 Febrero 2011, 01:39 AM

Puedes hacerlo tanto por php como por javascript. En cuyo caso php seria la hora del servidor y javascript la hora que tiene puesta el usuario.

Si necesitas mas ayuda solo dilo =)

Saludos

neopuerta360 · 17 Febrero 2011, 22:42 PM

Yo creo q con php es mejor y mas facil...!!!

Cergath · 18 Febrero 2011, 01:18 AM

La pregunta sería ahora: "Cómo?..", no les pido que me hagan el código

no, sino al menos un termino para empezar a buscar, alguna funcion, o algo por el estilo, ya que he buscado varios "sinonimos" de mi inquietud, y no encuentro nada parecido

...

cassiani · 18 Febrero 2011, 02:26 AM

Podrías hacer algo así: En donde va la imagen,

Código (php) [Seleccionar]

<?php echo '<img border="1" src="'.(date('G')<18 ? '/imagenes/imagen_dia.png' : '/imagenes/imagen_noche.png').'" />'; ?>

solo cambias los path, el nombre del las imágenes, etc.

Para el caso del CSS, el estilo, podrías tener dos hojas diferentes y que cargue una u otra de acuerdo a la condición que quieras.

Como te dijo Monkey, eso dependerá de la hora del servidor.

#!drvy · 18 Febrero 2011, 16:13 PM

La verdad es que con PHP es mas fácil. Pero hay un problema. Ese problema es que tienes la hora del servidor y no la del cliente. Por eso yo en mi caso usaría javascript. El otro problema es que el cliente igual no tiene javascript y pues.... tendría que usar PHP xD

En ambas lo primero que tienes que hacer es obtener la hora.
En php es mediate: date();
En javascript es una clase: new Date(); y .getHours().

Luego simplemente tendras que hacer un if/else comparando las horas y imprimir el contenido

Esto seria un script para cambiar de css entre horas ya que el ejemplo de php lo tienes arriba y mil veces mejor de lo que te abría dado yo xD

Código (javascript) [Seleccionar]


<html>
<head>
	<title>Monkeys will rlz.</title>
<script language="javascript">
	// Obtenemos la hora (0-23)
	var d = new Date();
	var Hora = d.getHours();
	// Si la hora es menor a 20:00 y mayor a 04:00
	if(Hora<20 && Hora>4)
	{
		// Imprimir CSS de dia
		document.write('<link rel="stylesheet" type="text/css" href="cssdedia.css" />');
	} else {
		// imprimr CSS de noche
		document.write('<link rel="stylesheet" type="text/css" href="cssdenoche.css" />');
	}
</script>
</head>
<body>
bla bla bla bla bla bla blaallalalalala
</body>
</html>

Se puede hacer de muchas formas pero da =. Lo importante es el ejemplo.

Saludos

~ Yoya ~ · 19 Febrero 2011, 00:11 AM

Yo en este caso usaría PHP.

Pueda que el usuario edite el código javascript xD.
Pueda que el usuario no tenga javascript activado o desactivado y no funcionaria el source correctamente.

#!drvy · 19 Febrero 2011, 01:01 AM

@Yoya

Adicto a la seguridad ? xD
Pues es que php es muy liante en cuanto a saber la hora del usuario y si no tiene javascript lo que puede es usar es un gat noscript y en el insertar el php.

Saludos

Sinedra · 19 Febrero 2011, 04:01 AM

Cita de: cassiani en 18 Febrero 2011, 02:26 AM
Podrías hacer algo así: En donde va la imagen,
Código (php) [Seleccionar] Expandir
<?php echo '<img border="1" src="'.(date('G')<18 ? '/imagenes/imagen_dia.png' : '/imagenes/imagen_noche.png').'" />'; ?>

solo cambias los path, el nombre del las imágenes, etc.

Para el caso del CSS, el estilo, podrías tener dos hojas diferentes y que cargue una u otra de acuerdo a la condición que quieras.

Como te dijo Monkey, eso dependerá de la hora del servidor.

me podrias explicar para que sirven esos operadores ? y :, los he visto varias veces ya y no encuentro informacion en ningun lado, siento que me estoy perdiendo de algo muy util

cassiani · 19 Febrero 2011, 05:29 AM

simplifica mucho. Es simplemente usar condiciones y devolver un valor, todo en una sola linea.

Antes del signo de interrogación "?" colocas la condición y entre dos puntos ":", colocas los dos posibles resultados

Código [Seleccionar]

if (condicion) {
    $var = true;
} else {
    $var = false;
}

es igual a

Código [Seleccionar]

$var = condición ? true : false;

Operador ternario:

Código [Seleccionar]

http://es.wikipedia.org/wiki/Operador_ternario