Hojas de estilo según la hora del día

Habitualmente cuando hablamos de interactividad como un añadido en la web solemos limitarnos al binomio persona-ordenador. Sin embargo, la interactividad puede implicar otras relaciones no tan exploradas .

Una variable que puede dar resultados interesantes es el tiempo. Con un código relativamente sencillo podemos hacer que una página web se comporte de manera distinta dependiendo de, por ejemplo, la hora del día.

Aquí tenemos un pequeño código que ya puse en la lista de correo de www.ovillo.org que nos permitirá, mediante javascript y CSS darle un aspecto distinto a una página web dependiendo de la hora a la que entre el usuario.

Es realmente básico. Simplemente cogemos la hora del sistema con el objeto Date y dependiendo de cual sea escribimos con document.write la dirección de una hoja de estilos u otra.

Metemos en el Head del documento este javascript:


var fecha=new Date();
// tomamos la fecha con el objeto Date();
var ahora= fecha.getHours();
// metemos la hora actual en una variable
var amanece=7;
// pongamos que amanece a las 7...
var anochece=21;
// y anochece a las 8 de la tarde.
if (ahora < amanece ||  ahora > anochece) {
    // si la hora actual es menor que la de amanecer
    //y mayor que la de anochecer;
    document.write('<link rel="stylesheet" href="noche.css" type="text/css">' );
   // tomamos la hoja de estilos "noche.css"
} else {
   document.write('<link rel="stylesheet" href="dia.css" type="text/css">');
    // y si no pues "dia.css"
}

Creamos dos hojas distintas de estilos para el “dia”y la “noche”
*”dia.css”*


body  {
   color: black;
   background-color: white;
}

*”noche.css”*


body  {
   color: white;
   background-color: black;
}

Si probais a cambiar la hora de amanecer o anochecer vereis como cambian las hojas de estilo.

El ejemplo es una simplificación extrema, y podría ser fácilmente implementado (y seguro con resultado más interesantes) en actionscript y otros lenguajes. Más sobre esto pronto.

tags:No tags

9 Responses to “Hojas de estilo según la hora del día”

  1. Miguel Says:

    // y anochece a las 8 de la tarde.
    Cada vez anochece antes! ;)

    Mola el script!

  2. jesus gollonet Says:

    Y usted que lo diga. Lo que peor llevo de los cambios de horario es salir de trabajar y que sea de noche.

    Bienvenido sea, don Miguel.

  3. missha Says:

    Una idea interesante. Creo que voy a ir preparando una versión navideña de blogold, y que pille el periodo vacacional de la fecha del sistema…

  4. WORD IN PROGRESS » ¿Cual es tu hora favorita? Says:

    […] un par de días he vuelto a jugar con proce55ing. Como últimamente estoy pensando en la interactividad y el […]

  5. helviox Says:

    Me encantó la idea y creo que la implantaré en una de las webs super accesibles-usables-tableless que estoy trabajando ahora mismo.

    ¡Enhorabuena! :)

  6. jesus gollonet Says:

    Me alegra mucho, aunque he de admitir con gran embarazo y rubor que no es (como yo creía, lo juro), idea mía.

    Hace unas semanas encontré la extensión de dreamweaver que me había “inspirado” la idea, y descubrí que el código es casi exactamente el mismo, así que esto tiene de inspiración lo que robotua con k10k.

    Sirva esto como disculpa. Lo dejo en el blog por referencia (y porque no todo el mundo lee los comentarios, jejej).

    Saludos, don helviOdd

  7. helviox Says:

    Pero la intención es lo que cuenta… :P
    (El que no se consuela es porque no quiere)

  8. Maxtor Says:

    Alguien podria decirme como aplicar esto pero para que aparezca una imagen segun el horario del sistema ??

    Gracias..Saludos!

  9. Nicole Says:

    Graaaacias me salvaste el dia! estaba usando un codigo para lo mismo pero basado en php y solo consideraba la hora del servidor.
    Bye!

Leave a Reply