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

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

示例:

<?php ini_set("date.timezone","Asia/Shanghai"); $hc = date("H");
  if($hc >= 7 && $hc < 18)
  echo '<link rel="stylesheet" type="text/css" href="http://rpsh.net/day.css" media="screen" />';
  else
  echo '<link rel="stylesheet" type="text/css" href="http://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 大师 :P

收藏+分享: Delicious / Live Favorites / Google书签 / 百度搜藏 / QQ书签 / 饭否 / 豆瓣 / Twitter
« »

35 条评论

久酷 的评论
久酷 说:
2008/12/22 9:21

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

[回复]

恬玮儿 的评论
恬玮儿 说:
2008/12/22 10:08

似乎可以有很多变化。。。先留着。。。。

[回复]

Betty 的评论
Betty 说:
2008/12/22 10:34

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

[回复]

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

[回复]

xiaorsz 的评论
xiaorsz 说:
2008/12/22 10:47

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

[回复]

Poshi 的评论
Poshi 说:
2008/12/22 12:06

有时间再研究一下

[回复]

longlan 的评论
longlan 说:
2008/12/22 12:29

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

[回复]

@longlan, 不错,这个想法好

[回复]

雷 的评论
说:
2008/12/22 14:13

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

[回复]

lol 的评论
lol 说:
2008/12/22 14:49

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

[回复]

@lol, 这两个模块被取消了,现在无法添加 :sad:

[回复]

lol 回复:
2008/12/23 12:12

@任平生, :lol: 回复好快

[回复]

那个谁 的评论
那个谁 说:
2008/12/22 15:58

嗯,够详细了

[回复]

@那个谁, 你是谁哇 :lol:

[回复]

Shawn 的评论
Shawn 说:
2008/12/22 16:51

晕。。
$hc = <script>document.write(new Date().getHours())</script>

[回复]

头昏眼花,&amp;gt; 写成 $gt; 了。。

[回复]

@Shawn, 帮你改好了 :smile:

[回复]

Ta1krei 的评论
Ta1krei 说:
2008/12/22 17:35

很好很强大。收了 :cool:

[回复]

醉倚西风 的评论
醉倚西风 说:
2008/12/23 0:17

我要主题 我要主题

[回复]

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

[回复]

林晨 的评论
林晨 说:
2008/12/23 0:36

很实用,做配合主题,做出来肯定很炫

[回复]

qiang 的评论
小卒 的评论
小卒 说:
2008/12/23 11:01

哈哈,有有点意思,现在没时间玩这些,先收藏了

[回复]

梦印江南 的评论
梦印江南 说:
2008/12/24 20:47

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

[回复]

@梦印江南, 平安夜不陪陪女朋友,登MSN干啥呢,呵呵 :mad:

[回复]

@野鸭, 不能,呵呵

[回复]

野鸭 的评论
野鸭 说:
2008/12/26 1:58

咦,用 PHP 能不能取得用户系统的时间?

[回复]

miss qin 的评论
miss qin 说:
2008/12/26 23:13

任同學 我又來了 :razz: 請教個問題 http://www.msnfly.cn/thread-8848-1-1.html 與這個同學問的一樣 拜託 拜託

[回复]

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

[回复]

NetPuter 的评论
NetPuter 说:
2009/01/01 18:30

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

[回复]

乱序 的评论
乱序 说:
2009/01/15 22:18

一分钟换一个css,这样算不算某种网站特色呢?

[回复]

@乱序, 你可以试试哈 :D

[回复]

Leeiio 的评论
Leeiio 说:
2009/01/23 23:56

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

[回复]

@Leeiio, 哈哈,也想做出酷的效果,就要多付出点的嘛

[回复]

寻找自己 的评论
寻找自己 说:
2009/09/03 16:24

气死我乐。搞了很久都搞不到 :twisted:

[回复]

发布评论

(设置头像)

微笑咧嘴笑悲伤惊讶震惊困惑酷大笑发疯吐舌头脸红哭泣邪恶变态转眼珠暗示惊叹疑问主意箭头中立菜鸟