白天晚上不同的背景

/ 折腾 / CSS / jquery / javascript / 背景 / hack
791 字 / 约 2 分钟

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

白天背景夜晚背景

实现起来并不难,简单的几句 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

评论

55
AI
AI 助手 AI
由 AI 生成 · 仅供参考
哈哈,这个时间判断真巧思!用背景切换来应和昼夜,让访问多了一份互动感。我特别喜欢夜晚那张,宁静安详。这么一来,阅读体验也跟着时间流动了。

留下一条评论

  1. 丕子
    丕子
    山东/Windows/Firefox

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  2. 万戈
    万戈
    上海/Windows/Firefox

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

      确实蛮有意思的。

  3. 佳缘小龙女
    佳缘小龙女
    湖南/IE

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

  4. 苏扬
    苏扬
    浙江/Windows/Chrome

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  5. insect
    insect
    陕西/Windows/Chrome

    这个有意思,哈哈

  6. 扣扣网
    扣扣网
    重庆/Windows/IE

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  7. 忘记浪漫
    忘记浪漫
    北京/Windows/Firefox

    晚上再来看看是不是变了

    1. 忘记浪漫
      忘记浪漫
      北京/Windows/Firefox

      果然变了
      :o

      1. 冰剑
        冰剑 博主
        湖南/Windows/Firefox

        当然会变的啦。

  8. 彼岸星辰
    彼岸星辰
    陕西/Opera

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

    2. 沉冰浮水
      沉冰浮水
      河北/Windows/IE

      是比较蛋疼。。

  9. 灵曦
    灵曦
    广东/Windows/IE

    我家的是随机滴

  10. 浩子
    浩子
    四川/Windows/IE

    额……
    :lol:

  11. 签名
    签名
    陕西/Windows/IE

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

  12. 且听风吟
    且听风吟
    陕西/Windows/IE

    回访来了。

  13. lenomon
    lenomon
    广东/Windows/Firefox

    很有意思!! 学习中

  14. 中南分校自考
    中南分校自考
    浙江/Windows/IE

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  15. 海天无影
    海天无影
    江苏/Windows/Firefox

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  16. 扣扣网
    扣扣网
    重庆/Windows/IE

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  17. wahyle
    wahyle
    河南/Windows/Chrome

    主题比较强悍。

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  18. ly
    ly
    湖北/Windows/IE

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  19. 迎接
    迎接
    北京/Windows/IE

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

    2. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

      1. 迎接
        迎接
        北京/Windows/IE

        非常感谢!!!

  20. 逸冰
    逸冰
    浙江/Windows/Firefox

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  21. 平平
    平平
    江苏/Windows/IE

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  22. 茶盘
    茶盘
    福建/Windows/IE

    很有创意,偷偷学习了

  23. 拆墙部队
    拆墙部队
    上海/Windows/Chrome

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

    1. 小不点
      小不点
      浙江/Windows/IE

      好吧,你够邪恶

  24. 蛋卷
    蛋卷
    山东/Windows/IE

    网上我再来看看

  25. 小松
    小松
    浙江/Windows/Firefox

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

  26. yong
    yong
    天津/Windows/Chrome

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  27. Ryan
    Ryan
    广东/Windows/IE

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

    1. 冰剑
      冰剑 博主
      湖南/Windows/Firefox

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

  28. 求索阁
    求索阁
    浙江/Windows/IE

    代码高手啊~崇拜下~!

  29. 笨小孩
    笨小孩
    湖南/Windows/Chrome

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

    1. 冰剑
      冰剑 博主
      广东/Windows/Firefox

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

  30. 无冷
    无冷
    四川/Windows/Chrome

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

  31. 闪闪的星
    闪闪的星
    湖南/Windows/Firefox

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

  32. True
    True
    江苏/Windows/Chrome

    代码怎么用啊?

    1. 冰剑
      冰剑 博主
      广东/Windows/Chrome

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