白天晚上不同的背景 - 嘀咕

细心的人可能会发现，我博客白天和晚上的背景图片都不一样，分别显示的是嘀咕的白天和夜晚图片。

实现起来并不难，简单的几句 JS 语句就能够搞定，把背景图片存放到相应目录后，再添加下面的 JS 代码。

var hours = new Date().getHours();//new 一个当前时间，取当前时间的小时；
if (hours >= 7 && hours < 19) {//if 判断，如果当前小时大于等于 7 点并且小于 19 点
  $(body).css("background", "url(bg_day.jpg) repeat-x fixed center top")
} else {//否则
  $(body).css("background", "url(bg_night.jpg) repeat-x fixed center top")
};

注意了，使用上面的 JS 代码需要装载 jQuery 库才可以，如果你不愿意装载一个 jQuery 进博客的话，也可以使用下面这段 JS 代码。

if (hours >= 7 && hours < 19) {//if 判断，如果当前小时大于等于 7 点并且小于 19 点
  document.body.style.background = "background-image", "url(bg_day.jpg) repeat-x fixed center top";
} else {//否则
  document.body.style.background = "background-image", "url(bg_night.jpg) repeat-x fixed center top";
};

写完收工。

原图下载：坚果云/Google Drive/BoxCN/DropBox

THE-END

PREVIOUS 点名将无数博客串联起来

NEXT 让 WP-Syntax 滑动显示隐藏

我读了你的日志，觉得你很用心，也很有创意。白天和晚上的背景图片不同，让人眼前一亮，也让人感觉很舒服。你分享的JS代码也很有用，我学习到了很多东西。谢谢你的分享！

已有 55 条评论

丕子山东 2010-07-06 06:44

回复

我来的时候是晚上的背景？都 6.44了
- 冰剑 MOD 湖南 2010-07-06 09:47
  
  回复
  
  我设置的是 7 点到 18 点的时候是白天，其他时间段是晚上，所以也包括了早上的 6 点。
  不过这个季节天亮得比较早，我改改吧。

万戈上海 2010-07-06 08:16

回复

这个相当有意思啊，可以借鉴一下
- 冰剑 MOD 湖南 2010-07-06 09:47
  
  回复
  
  确实蛮有意思的。

佳缘小龙女湖南 2010-07-06 09:32

回复

小龙女路过，不错的文章。

苏扬浙江 2010-07-06 10:25

回复

IF 函数判断大于7小于19点哈哈！看得懂！
- 冰剑 MOD 湖南 2010-07-06 19:21
  
  回复
  
  编程最基础的了，很容易看懂的，呵呵。

insect 陕西 2010-07-06 14:17

回复

这个有意思，哈哈

扣扣网重庆 2010-07-06 15:06

回复

哇还有这样的效果呀，不错支持。创新的想法哈哈
- 冰剑 MOD 湖南 2010-07-06 19:21
  
  回复
  
  不是我想的，是在别的地方看到的，然后自己尝试了一下。

忘记浪漫北京 2010-07-06 17:51

回复

晚上再来看看是不是变了
- 忘记浪漫北京 2010-07-08 00:34
  
  回复
  
  果然变了
  :o
  
  冰剑 MOD 湖南 2010-07-09 12:10
  
  回复
  
  当然会变的啦。

彼岸星辰陕西 2010-07-06 18:57

回复

同理就可以实现周一周二，春夏秋冬！是吧！
- 冰剑 MOD 湖南 2010-07-06 19:21
  
  回复
  
  确实可以，但是你这个想法比较蛋疼。
- 沉冰浮水河北 2010-07-07 13:24
  
  回复
  
  是比较蛋疼。。

灵曦广东 2010-07-06 21:01

回复

我家的是随机滴

浩子四川 2010-07-06 21:53

回复

额……
:lol:

签名陕西 2010-07-07 13:30

回复

恩这个还不错放假了我也修改一下背景不错很喜欢

且听风吟陕西 2010-07-08 10:41

回复

回访来了。

lenomon 广东 2010-07-08 13:04

回复

很有意思！！学习中

中南分校自考浙江 2010-07-08 23:06

回复

这个貌似意义不是很大哦真是折腾
- 冰剑 MOD 湖南 2010-07-09 12:10
  
  回复
  
  白天晚上给访客的感觉不同，还是有点意义的。

海天无影江苏 2010-07-09 10:45

回复

这个用在你的博客上很适合
你白天是山上游玩晚上改成山上乘凉很意境啊哈哈
- 冰剑 MOD 湖南 2010-07-09 12:10
  
  回复
  
  汗，我可没想那么多，只是刚好看到嘀咕有白天黑夜的图片。

扣扣网重庆 2010-07-09 11:44

回复

博主的博客要更新了我来了好几次了还是没更新打屁股哦
- 冰剑 MOD 湖南 2010-07-09 12:10
  
  回复
  
  我更新不频繁的，一个月最少就5篇吧，慢慢等更新吧，最迟我是半个月没更新，哇哈哈。

wahyle 河南 2010-07-09 14:15

回复

主题比较强悍。
- 冰剑 MOD 湖南 2010-07-09 20:49
  
  回复
  
  就是mg12的iNove，只是UI改动比较多一点。

ly 湖北 2010-07-09 14:59

回复

能否发布些你曾经用过的主题,我指你修改过的.比如上次白色的哪个,或者这次的这个,当然现在你用的这个，等你下次更换主题后再发布.可以吗？
- 冰剑 MOD 湖南 2010-07-09 20:49
  
  回复
  
  主题不是我写的，用别人的东西，修改后再发布，对不起别人的共享精神。
  我最多只能把我修改过的地方告诉你，你自己再去修改。
  Wordpress 好玩的地方也就在这里，要不断的去折腾。

迎接北京 2010-07-09 23:52

回复

请问一下,评论效果是怎么实现的?
博客里应该能有,找找`
- 冰剑 MOD 湖南 2010-07-09 23:57
  
  回复
  
  网上找的，不过博客里没发。
  我找找，看还能不能找到。
- 冰剑 MOD 湖南 2010-07-10 00:00
  
  回复
  
  找到了，http://goo.gl/5CQu。
  有什么不懂的再交流。。
  
  迎接北京 2010-07-10 19:04
  
  回复
  
  非常感谢!!!

逸冰浙江 2010-07-10 01:44

回复

我的那个主题就不用换背景了，我好像每次来看到都是晚上....
- 冰剑 MOD 湖南 2010-07-10 15:47
  
  回复
  
  你白天天天忙着卖十字绣，哪有时间啊，哈哈。

平平江苏 2010-07-10 15:43

回复

说明我不够细心啊，老薛的空间哪里有？
- 冰剑 MOD 湖南 2010-07-10 15:47
  
  回复
  
  laoxuehost.com，这个就是老薛的空间。
  http://my.laoxuehost.com/aff.php?aff=134
  从这里进去，我还能得到点好处。

茶盘福建 2010-07-16 22:13

回复

很有创意，偷偷学习了

拆墙部队上海 2010-07-17 08:53

回复

晚上么，要么别改，改就改个煽情滴，几十个女的在后面抖奶才带劲。 :lol:
- 小不点浙江 2010-07-22 17:54
  
  回复
  
  好吧，你够邪恶

蛋卷山东 2010-07-17 16:02

回复

网上我再来看看

小松浙江 2010-07-22 18:00

回复

我说这么熟悉，原来是嘀咕的~

yong 天津 2010-07-30 10:23

回复

正需要这个呢，不过能研究一下天气背景么？根据访客所在地区IP判断城市，然后判断天气，然后显示早晚天气背景，就像gmail的天气背景那样，呵呵
- 冰剑 MOD 湖南 2010-07-30 13:07
  
  回复
  
  技术上实现起来并不难，但是完全没必要这样嘛。

Ryan 广东 2010-08-01 09:40

回复

最近你没少发奋啊，我想可以设置更多的背景，比如一小时一换？
- 冰剑 MOD 湖南 2010-08-01 13:10
  
  回复
  
  可以实现啊，时间已经取出来了，在加上判断就可以了，但是一小时换一次的话比较蛋疼。

求索阁浙江 2010-08-04 07:47

回复

代码高手啊~崇拜下~！

笨小孩湖南 2010-09-10 09:02

回复

你这个是基于JS判断的，所以如果用户电脑时间不对的话，那么背景就是错误的你自己可以测试一下~
- 冰剑 MOD 广东 2010-09-11 10:07
  
  回复
  
  这我知道啊，JS本来就是客户端的脚本。

无冷四川 2011-04-08 23:35

回复

这个不错哦，值得试试看，晚上时候可以把背景做暗点

闪闪的星湖南 2012-04-14 18:38

回复

我用的嘀咕的背景——当初我并不知道那是嘀咕的背景，而且我后来才发现有晚上的，然后我就结合PHP实现的……

True 江苏 2012-07-22 22:06

回复

代码怎么用啊？
- 冰剑 MOD 广东 2012-07-23 15:50
  
  回复
  
  就是JS啊，贴到JS文件里面就行了。