TENHA UM CSS DIFERENTE PARA CADA HORA DO DIA

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.

Autor: Pedro Rogério
Fonte: http://www.pinceladasdaweb.com.br/

Um comentário sobre “TENHA UM CSS DIFERENTE PARA CADA HORA DO DIA

  1. Olá….
    Sei que o que vou perguntar talvez seja o fim de tudo…
    Mas como eu mal sei fazer um site em html…
    Como eu faço para conseguir os arquivos para o código acima… pois da um erro uma mensagem que falta algo…
    Se possivel espero e-mail seu.
    Grato!

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s