根据天气和时间动态更换的博客背景图

之前博客的背景图是一个永恒的晴天……
因为一开始就是当成一个可以根据时间和天气轮换的设计,但是懒得去写 js ,于是就是如大家所见的那样。

刚刚闲得无聊,把整个逻辑补完了。用到的是新浪的天气 js 接口,然后用一组图片搞定了他们。

核心代码如下:

var t = Math.floor(((new Date()).getHours() + 6) / 5),
    f = 'bright' + t;
if (w.indexOf('雨')>=0 || w.indexOf('雪') >= 0) {
    f = 'rainy';
} else if (w.indexOf('云')>=0 || w.indexOf('阴') >= 0) {
    f = 'cloudy' + t;
}
if (document.body.clientWidth > 600) {
    document.body.style.backgroundImage = 'url("' + f + '.jpg")';
}

具体的效果,可以参考本博客背景,也可以移步演示页面

相应的几张背景图为原创,谢绝扒图。如需自用,请联系我。