白天晚上不同的背景

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

白天背景

夜晚背景

实现起来并不难,简单的几句 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
cssjqueryjavascript背景hack
点名将无数博客串联起来
让 WP-Syntax 滑动显示隐藏

添加评论

已有 55 条评论

丕子
丕子 2010-07-06 06:44 回复
山东 Windows XP Firefox

我来的时候是晚上的背景? 都 6.44了

冰剑
冰剑 MOD 2010-07-06 09:47 回复
湖南 Windows 7 Firefox

我设置的是 7 点到 18 点的时候是白天,其他时间段是晚上,所以也包括了早上的 6 点。
不过这个季节天亮得比较早,我改改吧。

万戈
万戈 2010-07-06 08:16 回复
上海 Windows XP Firefox

这个相当有意思啊,可以借鉴一下

冰剑
冰剑 MOD 2010-07-06 09:47 回复
湖南 Windows 7 Firefox

确实蛮有意思的。

佳缘小龙女
佳缘小龙女 2010-07-06 09:32 回复
湖南 Unknown Internet Explorer

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

苏扬
苏扬 2010-07-06 10:25 回复
浙江 Windows XP Chrome

IF 函数判断 大于7小于19点 哈哈!看得懂!

冰剑
冰剑 MOD 2010-07-06 19:21 回复
湖南 Windows 7 Firefox

编程最基础的了,很容易看懂的,呵呵。

insect
insect 2010-07-06 14:17 回复
陕西 Windows 7 Chrome

这个有意思,哈哈

扣扣网
扣扣网 2010-07-06 15:06 回复
重庆 Windows XP Internet Explorer

哇 还有这样的效果呀,不错 支持。创新的想法 哈哈

冰剑
冰剑 MOD 2010-07-06 19:21 回复
湖南 Windows 7 Firefox

不是我想的,是在别的地方看到的,然后自己尝试了一下。

忘记浪漫
忘记浪漫 2010-07-06 17:51 回复
北京 Windows XP Firefox

晚上再来看看是不是变了

忘记浪漫
忘记浪漫 2010-07-08 00:34 回复
北京 Windows XP Firefox

果然变了
:o

冰剑
冰剑 MOD 2010-07-09 12:10 回复
湖南 Windows 7 Firefox

当然会变的啦。

彼岸星辰
彼岸星辰 2010-07-06 18:57 回复
陕西 Unknown Internet Explorer

同理就可以实现周一周二,春夏秋冬!是吧!

冰剑
冰剑 MOD 2010-07-06 19:21 回复
湖南 Windows 7 Firefox

确实可以,但是你这个想法比较蛋疼。

沉冰浮水
沉冰浮水 2010-07-07 13:24 回复
河北 Windows 7 Internet Explorer

是比较蛋疼。。

灵曦
灵曦 2010-07-06 21:01 回复
广东 Windows 7 Internet Explorer

我家的是随机滴

浩子
浩子 2010-07-06 21:53 回复
四川 Windows XP Internet Explorer

额……
:lol:

签名
签名 2010-07-07 13:30 回复
陕西 Windows 7 Internet Explorer

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

且听风吟
且听风吟 2010-07-08 10:41 回复
陕西 Windows XP Internet Explorer

回访来了。

lenomon
lenomon 2010-07-08 13:04 回复
广东 Windows 7 Firefox

很有意思!! 学习中

中南分校自考
中南分校自考 2010-07-08 23:06 回复
浙江 Windows XP Internet Explorer

这个貌似意义不是很大哦 真是折腾

冰剑
冰剑 MOD 2010-07-09 12:10 回复
湖南 Windows 7 Firefox

白天晚上给访客的感觉不同,还是有点意义的。

海天无影
海天无影 2010-07-09 10:45 回复
江苏 Windows XP Firefox

这个用在你的博客上 很适合
你白天是山上游玩 晚上改成山上乘凉 很意境啊 哈哈

冰剑
冰剑 MOD 2010-07-09 12:10 回复
湖南 Windows 7 Firefox

汗,我可没想那么多,只是刚好看到嘀咕有白天黑夜的图片。

扣扣网
扣扣网 2010-07-09 11:44 回复
重庆 Windows XP Internet Explorer

博主的博客要更新了 我来了好几次了 还是没更新 打屁股哦

冰剑
冰剑 MOD 2010-07-09 12:10 回复
湖南 Windows 7 Firefox

我更新不频繁的,一个月最少就5篇吧,慢慢等更新吧,最迟我是半个月没更新,哇哈哈。

wahyle
wahyle 2010-07-09 14:15 回复
河南 Windows XP Chrome

主题比较强悍。

冰剑
冰剑 MOD 2010-07-09 20:49 回复
湖南 Windows 7 Firefox

就是mg12的iNove,只是UI改动比较多一点。

ly
ly 2010-07-09 14:59 回复
湖北 Windows XP Internet Explorer

能否发布些你曾经用过的主题,我指你修改过的.比如上次白色的哪个,或者这次的这个,当然现在你用的这个,等你下次更换主题后再发布.可以吗?

冰剑
冰剑 MOD 2010-07-09 20:49 回复
湖南 Windows 7 Firefox

主题不是我写的,用别人的东西,修改后再发布,对不起别人的共享精神。
我最多只能把我修改过的地方告诉你,你自己再去修改。
Wordpress 好玩的地方也就在这里,要不断的去折腾。

迎接
迎接 2010-07-09 23:52 回复
北京 Windows XP Internet Explorer

请问一下,评论效果是怎么实现的?
博客里应该能有,找找`

冰剑
冰剑 MOD 2010-07-09 23:57 回复
湖南 Windows 7 Firefox

网上找的,不过博客里没发。
我找找,看还能不能找到。

冰剑
冰剑 MOD 2010-07-10 00:00 回复
湖南 Windows 7 Firefox

找到了,http://goo.gl/5CQu。
有什么不懂的再交流。。

迎接
迎接 2010-07-10 19:04 回复
北京 Windows XP Internet Explorer

非常感谢!!!

逸冰
逸冰 2010-07-10 01:44 回复
浙江 Windows XP Firefox

我的那个主题就不用换背景了,我好像每次来看到都是晚上....

冰剑
冰剑 MOD 2010-07-10 15:47 回复
湖南 Windows 7 Firefox

你白天天天忙着卖十字绣,哪有时间啊,哈哈。

平平
平平 2010-07-10 15:43 回复
江苏 Windows XP Internet Explorer

说明我不够细心啊,老薛的空间哪里有?

冰剑
冰剑 MOD 2010-07-10 15:47 回复
湖南 Windows 7 Firefox

laoxuehost.com,这个就是老薛的空间。
http://my.laoxuehost.com/aff.php?aff=134
从这里进去,我还能得到点好处。

茶盘
茶盘 2010-07-16 22:13 回复
福建 Windows XP Internet Explorer

很有创意,偷偷学习了

拆墙部队
拆墙部队 2010-07-17 08:53 回复
上海 Windows 7 Chrome

晚上么,要么别改,改就改个煽情滴,几十个女的在后面抖奶才带劲。 :lol:

小不点
小不点 2010-07-22 17:54 回复
浙江 Windows XP Internet Explorer

好吧,你够邪恶

蛋卷
蛋卷 2010-07-17 16:02 回复
山东 Windows XP Internet Explorer

网上我再来看看

小松
小松 2010-07-22 18:00 回复
浙江 Windows 7 Firefox

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

yong
yong 2010-07-30 10:23 回复
天津 Windows 7 Chrome

正需要这个呢,不过能研究一下天气背景么? 根据访客所在地区IP判断城市,然后判断天气,然后显示早晚天气背景,就像gmail的天气背景那样,呵呵

冰剑
冰剑 MOD 2010-07-30 13:07 回复
湖南 Windows 7 Firefox

技术上实现起来并不难,但是完全没必要这样嘛。

Ryan
Ryan 2010-08-01 09:40 回复
广东 Windows 7 Internet Explorer

最近你没少发奋啊,我想可以设置更多的背景,比如一小时一换?

冰剑
冰剑 MOD 2010-08-01 13:10 回复
湖南 Windows 7 Firefox

可以实现啊,时间已经取出来了,在加上判断就可以了,但是一小时换一次的话比较蛋疼。

求索阁
求索阁 2010-08-04 07:47 回复
浙江 Windows 7 Internet Explorer

代码高手啊~崇拜下~!

笨小孩
笨小孩 2010-09-10 09:02 回复
湖南 Windows 2003 Chrome

你这个是基于JS判断的,所以如果用户电脑时间不对的话,那么背景就是错误的你自己可以测试一下~

冰剑
冰剑 MOD 2010-09-11 10:07 回复
广东 Windows 7 Firefox

这我知道啊,JS本来就是客户端的脚本。

无冷
无冷 2011-04-08 23:35 回复
四川 Windows 7 Chrome

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

闪闪的星
闪闪的星 2012-04-14 18:38 回复
湖南 Windows XP Firefox

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

True
True 2012-07-22 22:06 回复
江苏 Windows 7 Chrome

代码怎么用啊?

冰剑
冰剑 MOD 2012-07-23 15:50 回复
广东 Windows 7 Chrome

就是JS啊,贴到JS文件里面就行了。

移动设备上继续阅读