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

白天背景夜晚背景

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