Blog > 互联网产品设计 > 根据时段自动切换你的站点CSS风格

根据时段自动切换你的站点CSS风格

  网站能切换几套CSS风格早已不是什么新鲜事了。大家也都知道怎么去弄。早上发现一个有意思得站点  http://www.leemunroe.com/ 
  同样是切换风格。不过他做了点小小的调整。站点会根据当时的时间自动调整站点风格。作者为站点制作了早上、下午、夜晚三套皮肤,主要是分别制作了背景。12点以前系统会使用早上的皮肤,过了12点,站点会自动替换成下午的风格,5点后则替换成夜晚的风格。

<link rel=”stylesheet” type=”text/css”
href=”<?php $hour = date(“H”); if ($hour < 12) echo “morning.css”; elseif ($hour < 17) echo “day.css”; else echo “night.css”; ?>
” />

 ASP版:   

<link rel=”stylesheet” type=”text/css” href=”<%
if hour(now)<12 then
  response.write “a.css”
else
  if hour(now)<17 then
    response.write “b.css”
  else
    response.write “c.css”
  end if
end if
%> ” />

主要的功能实现是靠在头部的这段判断代码,很容易理解。有兴趣可以自己试试。
到这里去感受一下效果:http://www.leemunroe.com/ 
根据时段自动切换你的站点CSS风格
根据时段自动切换你的站点CSS风格
根据时段自动切换你的站点CSS风格

10条评论

  1. 生活笔谈 says:

    有点意思哦!改天用到LBS上去!呵呵!

  2. show8 says:

    有意思,不过asp下如何修改啊。

  3. dowhatyouwant says:

    Asp版的代码已更新。

  4. SBB says:

    拜托,这已经是咸丰年代的事情了,iGoogle也已经应用很久了,真是一群土鳖,用JS就可以实现,居然还用服务端的代码,唉……

  5. silverys says:

    楼上的为什么只会说这些毫无意义的事,不如把JS代码贴出来。

  6. dowhatyouwant says:

    楼上的楼上的SBB。你起的这个名字很符合你。

    不喜欢你可以飘过,不过少来这里污染空气。

  7. asdf says:

    这个是够老套的了

  8. 大猫 says:

    很好玩诶~

  9. since says:

    JS代码如下:
    —————————————————————————————————
    <link rel="stylesheet" type="text/css" href="a.css" id="sitecss" />
    <script language="JavaScript">
      function trunCss() {
        var today = new Date();
        var time = today.getHours();
        var cssurl = "";
        if (( time>=0) && (time < 7 ))
          cssurl="1.css"
        if (( time >= 7 ) && (time < 12))
          cssurl="2.css"
        if (( time >= 12) && (time < 14))
          cssurl="3.css"
        if (( time >=14) && (time < 18))
          cssurl="4.css"
        if ((time >= 18) && (time <= 22))
          cssurl="5.css"
        if ((time >= 22) && (time < 24))
          cssurl="6.css"
        document.getElementById("sitecss").href=ccsurl
      }
    trunCss();
    </script>
    ——————————————————–
    其实还是站长这个做在服务端的方法好,如果客户端有问题,例如不支持js什么的,你的页面就会很丑

  10. schiy says:

    这个有意思啊,嘿嘿

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>