Um CSS para cada hora do dia (igoogle like)
Caio SalimJun 27th, 2007
Utilize 6 folhas de estilo diferentes em seu site para determinados horários do dia somente utilizando JavaScript, utilize-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>
Enjoy it
Fist post…. of many
Tips of CSS, JS, Semantica, Tableless, Acessibilidade, SEO, and so much more
So do something like this at blog! xD