近小编在学习爬虫，就想找个东西练练手，小说、图片、音乐什么的都烂大街了，正好最近天气是越来越冷，小编窝家里自己敲了个天气简单查询的代码，请大家指正下！

先找目标，最终还是选用了中国天气网，url:http://www.weather.com.cn/

找到目标后，开始分析网页，发现里面是支持查询，并且查询的城市和url又一定的规律，如下：

百度下后，发现url中的数字是城市代码，这就简单了，先把代码弄到，然后做成字典。

然后，分析网页的元素，发现近7天的预报都已经整整齐齐的放在那里了，这就简单了，开始写代码吧！

选定方法，这里小编用的是xpath，方便、快捷。

需要提前安装lxml库，然后导入

import requests
from lxml import etree

为了方便查询，直接写input，然后拼接网址

city=input("请输入要查询的城市：")
city_code=city_code_list[city]
home_page='http://www.weather.com.cn'
url=home_page + '/weather/' + city_code + '.shtml'

解析拼接好的网址，这里小编用requests获取get内容

def get_html(url):
header={'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0'}
html=requests.get(url, headers=header)
html.encoding='utf-8'
return html.text
html=etree.HTML(get_html(url))

然后开始查找路径

date=html.xpath('//ul[@class="t clearfix"]/li[{}]/h1/text()'.format(i))

由于7天的预报都是在li标签下的，所以写到循环中，print输出即完成！

最后效果如下:

简单的功能实现，成就感满满的！

代码放上：

city=input("请输入要查询的城市：")
city_code=city_code_list[city]
home_page='http://www.weather.com.cn'
url=home_page + '/weather/' + city_code + '.shtml' #city_code + '.shtml'
def get_html(url):
header={'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0'}
html=requests.get(url, headers=header)
html.encoding='utf-8'
return html.text
html=etree.HTML(get_html(url))
for i in range(1,8):
date=html.xpath('//ul[@class="t clearfix"]/li[{}]/h1/text()'.format(i))[0]#日期
weather=html.xpath('//ul[@class="t clearfix"]/li[{}]/p[1]/text()'.format(i))[0]#天气
tem1=html.xpath('//ul[@class="t clearfix"]/li[{}]/p[@class="tem"]/span/text()'.format(i))
tem2=html.xpath('//ul[@class="t clearfix"]/li[{}]/p[@class="tem"]/i/text()'.format(i))
tem=tem1[0]+'/'+ tem2[0]#拼接温度最高/最低
win1=html.xpath('//ul[@class="t clearfix"]/li[{}]/p[@class="win"]/i/text()'.format(i))
win2=html.xpath('//ul[@class="t clearfix"]/li[{}]/p[@class="win"]/em/span[1]/@title'.format(i))
win=win2[0]+ win1[0]#拼接风力大小
print(date,weather,tem,win）

喜欢就关注一波呗（^_^）,想和小编一起学习Python的，可以私信小编哦。

然发现一个国外的网站接入了天气板块，很有意思的是该网站所有的天气图标都是会动的。

于是我便有了学（chao）习（xi）的念头，我们来一探究竟。

一、顺藤摸瓜

通过审查元素，我们很快定位到了一个叫 skycons 的 js 类库，顺藤摸瓜找到了 github 地址,顺手下载了一份 skycons.js 文件。

OK，万事具备，下面我们开始分步剖析。

二、简单示例

首先，添加 canvas，并设置 id，以备后续使用，宽高可以随意设置，如下:

其次，我们实例化 Skycons：

然后，在我们的元素上通过 canvas id 来添加动画，并选择动画类型：

最后，别忘了，播放它：

通过调用 skycons.play() 来播放动画。

这样，一个简单的示例就完成了，是不是很简单呢？下面我们来看看参数详解。

三、参数详解

可设置的天气类型参数：

• CLEAR_DAY
• PARTLY_CLOUDY_DAY
• CLOUDY
• RAIN
• SLEET
• SNOW
• WIND
• FOG

添加动画：

播放动画：

skycons.play();

暂停动画：

skycons.pause()

动态更改 icon ：

skycons.set('jartto1', Skycons.PARTLY_CLOUDY_NIGHT);

为什么要动态更改，因为天有不测风云，你的天气信息一定要及时。

移除动画：

skycons.remove('jartto2');

四、实际应用

为了更好的说明问题，我们来做一个天气板块的完整示例：

首先，引入 skycons 文件：

其次，创建html结构：

最后，添加 js 代码：

是不是很简单呢，更多请查看 Demo：

https://github.com/chenfengyanyu/my-web-accumulation/tree/master/skycons

五、问题汇总

1.实际的天气状况可能有很多，而 skycons 提供的选择并不多；

解决方案：合并同类的天气状况，可能的代码如下:

六、源码分析

因为看不到文档，所以很好奇，大概瞅了一些源码。当然，也并不是一无所获，譬如：

1.requestAnimationFram 的兼容处理：

2.add 方法：

add 方法操作的是一个数组，也就意味着，我们只需要实例化一次 skycons 就可以添加多个 icons 。

3.定时器的时间设置技巧 1000 / 60，动画更加流畅：

起初不太理解作者为何要设置这个数值，后来才意识到：

大多数电脑显示器的刷新频率是 60 Hz，大概相当于每秒钟重绘 60 次。

大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。

因此，最平滑动画的最佳循环间隔是 1000 ms / 60，约等于 16.6 ms 。

4.各种 canvas 画太阳，云彩，风等方法，可以参考。

源码比较简单，详情请查看：

https://github.com/chenfengyanyu/my-web-accumulation/blob/master/skycons/skycons.js

七、效果一览

是不是很有意思，快来试试吧！附上 Demo 地址：

https://github.com/chenfengyanyu/my-web-accumulation/tree/master/skycons

八、热门原创文章

1.HTML5 之音频合成（Speech Synthesis）

2.DevOps 简介

3.前端反思录（三）—谈谈个人规划