2010-02-12 20 views
10

Quiero aplicar diferentes hojas de CSS a mi sitio dependiendo de la hora del navegador. Por ejemplo, si es de día, muestre day.css o night.css por la noche.¿Cómo determinar si es de día o de noche en javascript o jquery?

Puedo hacer esto con PHP, pero se basa en la hora del servidor, no en la hora local del navegador.

¿Hay alguna manera de saber la hora en javascript? Probablemente voy a usar jQuery para simplemente iniciar el CSS una vez que funcionó.

+4

No es necesario tener JavaScript para esta tarea. Solo sube las escaleras y abre las cortinas. –

+0

Aún puede hacerlo en PHP en función de la hora local del cliente ... pero tendrá que usar algún tipo de servicio de IP para la ubicación, que no es completamente confiable. – mpen

+0

Esta es una gran pregunta y posiblemente una gran característica, pero existe la posibilidad de que esto se vuelva loco. He usado computadoras antes de que los tiempos se hayan configurado incorrectamente (como que la hora está muy baja). Uno de ellos fue con Vista: después de sincronizarlo con los relojes de Internet, se revirtió. Por lo tanto, puede haber casos en los que pueda interpretar incorrectamente los datos. Bueno, puede haber casos donde los datos son incorrectos. Si esto es más sobre el tema y realmente no te importa si es incorrecto en algunos casos, definitivamente sigue adelante, pero de lo contrario, es posible que no quieras esto. No sé lo que haría. ¡Buena suerte! –

Respuesta

22
var hr = (new Date()).getHours(); //get hours of the day in 24Hr format (0-23) 

En función de la definición de día/noche, lleve a cabo su magia :)

PS: Si su día/noche no empieza a la hora exacta, puede intentar getMinutes().

2
(new Date).getHours() 

obtendrá la hora local del tiempo (0-23) del cliente. En función de ese valor, cambie la hoja de estilo de la página. Establecería la hoja de estilos del día como la predeterminada y la cambiaría cuando sea necesario.

Mi idea inicial es que usted querría realizar esta operación lo más pronto posible en el cliente para evitar cualquier potential browser reflow.

0

utilizo esta lógica:

const hours = new Date().getHours() 
const isDayTime = hours > 6 && hours < 20 
Cuestiones relacionadas