近小編在學習爬蟲，就想找個東西練練手，小說、圖片、音樂什么的都爛大街了，正好最近天氣是越來越冷，小編窩家里自己敲了個天氣簡單查詢的代碼，請大家指正下！

先找目標，最終還是選用了中國天氣網，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.前端反思錄（三）—談談個人規劃