根据时间调用不同的CSS文件

iGoogle 和新发布的 Windows Live Wave3 中都有根据时间调用不同CSS样式的动态主题,想不想也将此效果里用到自己 Blog 上,只需一个小小的修改就可以做到啦 😀

示例:

<?php ini_set("date.timezone","Asia/Shanghai"); $hc = date("H");
  if($hc >= 7 && $hc < 18)
  echo '<link rel="stylesheet" type="text/css" href="https://rpsh.net/day.css" media="screen" />';
  else
  echo '<link rel="stylesheet" type="text/css" href="https://rpsh.net/night.css" media="screen" />';
?>

鉴于大多数同学都租用的米国的虚拟主机,所以开始加上一句 ini_set("date.timezone","Asia/Shanghai") 来让时间设定为咱中国时间,剩下的就很好理解了,7点到18点为白天调用 day.css  文件,18点到次日7点为夜间调用 night.css 文件。

具体到我们 WordPress ,你可能就要修改你主题 header.php 文件中的调用CSS 文件的部分:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

为:

<?php ini_set("date.timezone","Asia/Shanghai"); $hc = date("H");
  if($hc >= 7 && $hc < 18)
  echo '<link rel="stylesheet" type="text/css" href="';
echo bloginfo('stylesheet_directory');
echo '/day.css"'; else echo '/night.css"'
echo 'media="screen" />'; ?>

* 你需要编写一个 day.css 和一个 night.css 的文件放在你的主题文件夹里。

如果像本 Blog 一样只是按时间显示不同的 banner 或 背景图片,CSS文件的其他地方都相同的话,CSS的调用保持不便,只需在你主题 header.php 文件的 </head>  之前加入下边的代码即可

<style type="text/css">
  body{background: url(<?php ini_set("date.timezone","Asia/Shanghai"); $hc = date("H");
  if($hc >= 6 && $hc < 9)
  echo '图片地址一';
  else if($hc >= 9 && $hc < 18)
  echo '图片地址一';
  else
  echo '图片地址三';
  ?>) no-repeat scroll center top;}
</style>

类似的,你还可以写出 早上好,下午好,晚上好 之类的欢迎语~~

如果要根据访问用户的系统时间来做判断的话,就有点麻烦了,需要用 js 来返回用户时间,对这个有要求的,可以请教最近玩 js 走火入魔的 Shawn 大师 😛

35 条评论

  1. 😀 😀 这个东东倒是蛮不错的!^_^先收藏下,以后有时间试下^_^

  2. 我现在对这种东西兴趣索然,一心只想减少外部调用,提高访问速度……

    1. @Betty, 这个没有增加外部调用哦,只是用php判断一下,应该输出哪个CSS链接而已,基本对速度没影响 😆

  3. 不错的说,收藏了!! 😆
    Shawn 不是最近走火入魔的,他一直是走火入魔的。哈哈!

  4. 强势插入前10位
    记得Discuz.net的童虎大哥就是用这样方式公布DZ7的发布时间的!

  5. 海洋又出必杀了,呵呵,不错,不过我没用啊。

  6. spaces 的 “新建共享空间” “更新的共享空间” 模块还有没有了, 怎么添加的? thx

    1. @醉倚西风, 别慌别慌,livesino快发布了~~
      抱歉,我这个主题是个人做来玩玩的,不易发布,原版是 livesino 的 ➡

  7. 今天晚上的MSN是不是出了问题??除了MSN主页。我什么都用不了。。

    1. @miss qin, 这个我不清楚是怎么回事,你可以试着卸载所有的msn插件,然后卸载msn程序,重装一下 😡

  8. 我记得留过言啦,怎么木有我..
    根据PHP,也可以根据JS的说..
    最后,Happy 牛 Year..!

  9. 很酷,很早的時候就想實現這個功能,後來因為太懶得寫多份css..就沒折騰了

评论已关闭