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

之前博客的背景图是一个永恒的晴天……
因为一开始就是当成一个可以根据时间和天气轮换的设计,但是懒得去写 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")';
}

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

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

评论

初次

请问这个功能怎么在自己网站实现呢,有什么简单的调用方式吗

发表评论

发表评论代表你授权本网站存储并在必要情况下使用你输入的邮箱地址、连接本站服务器使用的 IP 地址和用户代理字符串 (User Agent) 用于发送评论回复邮件,以及将上述信息分享给 Libravatar Akismet,用于显示头像和反垃圾。