Tenha um CSS diferente para cada hora do dia

Postado por: Pedro Rogério em
6 Folhas de Estilo diferentes

É o que propõe em seu site Katherine Angela Gallia, ela utiliza 6 folhas de estilo diferentes em seu site para determinados horários do dia somente utilizando JavaScript, ela utiliza-se do seguinte código:


<script language="JavaScript">
<!-- Begin
function getCSS()
{
 datetoday = new Date();
 timenow=datetoday.getTime();
 datetoday.setTime(timenow);
 thehour = datetoday.getHours();

 if (thehour > 20)
  display = "tree_twilight.css";
   else if (thehour > 17)
  display = "tree_sunset.css";
 else if (thehour > 14)
  display = "tree_afternoon.css";
 else if (thehour > 11)
  display = "tree_noon.css";
 else if (thehour > 7)
  display = "tree_morning.css";
 else if (thehour > 4)
  display = "tree_sunrise.css";
 else if (thehour > 1)
  display = "tree_twilight.css";
 else
  display = "tree_sunset.css";

 var css = '< '; css+='link rel="stylesheet" href=' + display + ' \/';  css+='>';

 document.write(css);
// End -->
}
</script>
<script language="javascript">getCSS();</script>

Onde:

  • Das 5 ás 8 da manhã: Ela utiliza o tema sunrise.
  • Das 8 da manhã até o Meio-dia: Ela utiliza o tema morning.
  • Do Meio dia ás 3 da tarde: Ela utiliza o tema noon.
  • Das 3 ás 6 da tarde: Ela utiliza o tema afternoon.
  • Das 6 da tarde ás 9 da noite: Ela utiliza o tema sunset.
  • E das 9 da noite ás 5 da manhã: Ela utiliza o tema twilight.

Caso o usuário navegue com o JavaScript desabilitado, ela utiliza o tema sunset:


<noscript>
<link rel="stylesheet" href="tree_sunset.css" type="text/css">
</noscript>

Até me deu vontade de fazer isso aqui no meu blog agora.

Aprenda com quem sabe de verdade.

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

Gostou desse post?

Assine o nosso Feed RSS, siga-nos no Twitter, ou simplesmente nos recomende a seus amigos!

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.

2 Responses to “Tenha um CSS diferente para cada hora do dia”

  1. Flavio Mendes disse:

    Pedro, esse conteúdo será muito oportuno para um projeto que estou fazendo… Estando pronto eu posto o link para vc. :o)

Leave a Reply