最简单的天气组件
在有些页面中我们常常用到一些天气的插件，网上会提供一些免费的API，很实用，这边介绍一种非常简单的天气插件，如果你只需要在页面中简单的实现以下当前的天气状况不如拿来用一用。
首先实现出来的效果是这样的：
具体的实现方法如下：
步骤1：
引入样式表和js
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery.min.js"></script> <script src="js/jquery.leoweather.min.js"></script>
jquery.leoweather.min.js：
eval(function(p, a, c, k, e, d) { e = function(c) { return (c < a ? "": e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36)) }; if (!''.replace(/^/, String)) { while (c--) d[e(c)] = k[c] || e(c); k = [function(e) { return d[e] }]; e = function() { return '\\w+' }; c = 1; }; while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]); return p; } ('(x(a){a.2S.2T=x(b){y c={22:\'\',26:\'\\2P\\2U\\1e\\2Z\\2X\\2M\\D\\2h\\2N\\C\\30\\3b\\H\\3a\\2x\\1I\\M\\D\\39\\C\\N\\D\\3c\\C\\N\\D\\1g\\C\\H\\D\\2h\\C\\1s\\D\\38\\C\\1s\\D\\33\\C\\H\\32\\31\\D\\34\\C\\H\\37\\36\\2x\\1e\\2v\\2B\\M\\D\\2v\\2B\\C\\H\\35\\16\\D\\3d\\2L\\C\\1e\\16\\13\\1I\\M\\D\\16\\13\\C\\H\\13\\1E\\M\\D\\13\\1E\\C\\H\\15\\1F\\M\\D\\15\\1F\\C\\H\\15\\21\\M\\D\\15\\21\\C\\H\\1T\\1U\\M\\D\\1T\\1U\\C\'};y d=a.3e(c,b);9 20.3f(x(){y e=a(20),f=X 1K(),h=v(d.26),i=\'\\T\\Q\\Q\\W\\1s\\N\\N\\W\\T\\W\\V\\25\\P\\U\\Q\\T\\P\\1r\\V\\1p\\1c\\1t\\U\\V\\L\\1Q\\29\\V\\L\\1t\\N\\1c\\1q\\1r\\U\\29\\P\\N\\1c\\1t\\1b\\P\\2O\\N\\25\\2W\\L\\2V\\V\\W\\T\\W\\2Y\\L\\1Q\\1b\\P\\S\\2Q\\1p\\11\\1b\\U\\1L\\S\\2R\\11\\L\\1c\\Q\\1L\\S\';y j=h.3B(/\\{.*?\\}/g),k=X 1K();1n(y l=0;j.27>l;l++){k[l]=\'1S\'+1V(j[l]).J(/%u/g,\'\').J(/%1Z/g,\'\').J(/%1X/g,\'\')};y m=k.Y();7(m.F(\'1j\')>=0||m.F(\'2d\')>=0||m.F(\'2r\')>=0||m.F(\'2l\')>=0||m.F(\'2n\')>=0||m.F(\'1j\')>=0||m.F(\'2t\')>=0){a.3w({3y:2G(i,d.22),3C:"3A",3x:x(){1n(s 3z 28.w){y o=28.w[s][0];f[\'2e\']=s;f[\'1f\']=o[\'1f\'];f[\'1x\']=o[\'1x\'];f[\'1i\']=o[\'1i\'];f[\'1k\']=o[\'1k\'];f[\'1o\']=o[\'1o\'];f[\'1w\']=o[\'1w\'];f[\'1v\']=o[\'1v\'];f[\'1l\']=o[\'1l\'];f[\'1h\']=o[\'1h\'];f[\'1m\']=o[\'1m\']};n(f)}})}z{n()};x n(o){y p=X 1R(),q=0;1n(y r=0;k.27>r;r++){1W=h.J(/\\{(.*?)\\}/g,x(s,t){y u=\'1S\'+1V(t).J(/%u/g,\'\').J(/%1Z/g,\'\').J(/%1X/g,\'\');9 3l(u+\'(p,o)\')})};7(k.Y().F(\'1y\')>=0){q=1d*1u*1u};7(k.Y().F(\'1N\')>=0){q=1d*1u};7(k.Y().F(\'1H\')>=0){q=1d};e.I(1W);7(q>0){3k(1Y,q)}};x 1Y(){y o=X 1R();G=o.24();7(G<Z)G=G+Z;y p=o.1D()+1;7(p<10)p=\'0\'+p;y q=o.1z();7(q<10)q=\'0\'+q;y r=o.E();7(r<10)r=\'0\'+r;y s=o.1A();7(s<10)s=\'0\'+s;y t=o.1G();7(t<10)t=\'0\'+t;y u=o.1P();7(u==0)u=v(\'\\1g\');7(u==1)u=v(\'\\2z\');7(u==2)u=v(\'\\2C\');7(u==3)u=v(\'\\2y\');7(u==4)u=v(\'\\2u\');7(u==5)u=v(\'\\2w\');7(u==6)u=v(\'\\2J\');7(r<2H){B=v(\'\\2I\\2E\')}z 7(r<2D){B=v(\'\\2F\\O\')}z 7(r<12){B=v(\'\\O\\R\')}z 7(r<14){B=v(\'\\2f\\R\')}z 7(r<17){B=v(\'\\2j\\R\')}z 7(r<19){B=v(\'\\2a\\1a\')}z{B=v(\'\\1a\\O\')};a(\'.23\',e).I(G);a(\'.1C\',e).I(p);a(\'.1B\',e).I(q);a(\'.1M\',e).I(r);a(\'.1O\',e).I(s);a(\'.1J\',e).I(t);a(\'.2K\',e).I(u);a(\'.2c\',e).I(B)};x 3n(o,p){G=o.24();7(G<Z)G=G+Z;9\'<A K="23">\'+G+\'</A>\'};x 3m(o,p){y q=o.1D()+1;7(q<10)q=\'0\'+q;9\'<A K="1C">\'+q+\'</A>\'};x 3h(o,p){y q=o.1z();7(q<10)q=\'0\'+q;9\'<A K="1B">\'+q+\'</A>\'};x 1y(o,p){y q=o.E();7(q<10)q=\'0\'+q;9\'<A K="1M">\'+q+\'</A>\'};x 1N(o,p){y q=o.1A();7(q<10)q=\'0\'+q;9\'<A K="1O">\'+q+\'</A>\'};x 1H(o,p){y q=o.1G();7(q<10)q=\'0\'+q;9\'<A K="1J">\'+q+\'</A>\'};x 3j(o,p){y q=o.1P();7(q==0)q=v(\'\\1g\');7(q==1)q=v(\'\\2z\');7(q==2)q=v(\'\\2C\');7(q==3)q=v(\'\\2y\');7(q==4)q=v(\'\\2u\');7(q==5)q=v(\'\\2w\');7(q==6)q=v(\'\\2J\');9\'<A K="2K">\'+q+\'</A>\'};x 3i(o,p){y q=o.E();7(q<2H){B=v(\'\\2I\\2E\')}z 7(q<2D){B=v(\'\\2F\\O\')}z 7(q<12){B=v(\'\\O\\R\')}z 7(q<14){B=v(\'\\2f\\R\')}z 7(q<17){B=v(\'\\2j\\R\')}z 7(q<19){B=v(\'\\2a\\1a\')}z{B=v(\'\\1a\\O\')};9\'<A K="2c">\'+B+\'</A>\'};x 1j(o,p){9 p[\'2e\']};x 2d(o,p){7(o.E()>18&&o.E()<8){9 2p(o,p)}z{9 2q(o,p)}};x 2q(o,p){9 p[\'1i\']};x 2p(o,p){9 p[\'1l\']};x 2r(o,p){7(o.E()>18&&o.E()<8){9 2s(o,p)}z{9 2A(o,p)}};x 2A(o,p){9 p[\'1k\']};x 2s(o,p){9 p[\'1h\']};x 2l(o,p){7(o.E()>18&&o.E()<8){9 2m(o,p)}z{9 2k(o,p)}};x 2k(o,p){9 p[\'1f\']};x 2m(o,p){9 p[\'1w\']};x 2n(o,p){7(o.E()>18&&o.E()<8){9 2o(o,p)}z{9 2g(o,p)}};x 2g(o,p){9 p[\'1x\']};x 2o(o,p){9 p[\'1v\']};x 2t(o,p){7(o.E()>18&&o.E()<8){9 2i(o,p)}z{9 2b(o,p)}};x 2b(o,p){9 p[\'1o\']};x 2i(o,p){9 p[\'1m\']};x 3t(o,p){7(o.E()>18&&o.E()<8){9 v(\'\\2L\\3s\')}z{9 v(\'\\3v\\16\')}};x v(o){9 3u(o.J(/\\u/g,"%u"))};x 2G(o,p){9 v(o)+p+v(\'\\11\\1b\\1q\\L\\S\\3p\\11\\L\\T\\U\\1r\\1p\\P\\Q\\S\\3o\\Q\\1q\\3r\\3q\').J(/\\%/g,\'\')}})}})(3g);', 62, 225, '|||||||if||return||||||||||||||||||||||UC8F6C6362||function|var|else|span|xx|u007d|u007b|getHours|indexOf|YY|u0020|html|replace|class|u0063|uff1a|u002f|u4e0a|u0065|u0074|u5348|u003d|u0068|u0061|u002e|u0070|new|toString|1900||u0026||u6c14||u98ce|u5929||||u665a|u0064|u0069|1000|u7684|d1|u65e5|t2|s1|UC57CE5E02|t1|s2|f2|for|f1|u0073|u0066|u0072|u003a|u006e|60|p2|d2|p1|UC65F6|getDate|getMinutes|weather_DD|weather_MM|getMonth|u6e29|u5411|getSeconds|UC79D2|u662f|weather_ss|Array|u0079|weather_hh|UC5206|weather_mm|getDay|u006f|Date|UC|u56fe|u6807|escape|str|7D|UC66F465B0SJ|7B|this|u7ea7|city|weather_YY|getYear|u0077|format|length|SWther|u006d|u508d|UC767D592956FE6807|weather_xx|UC59296C14|name|u4e2d|UC767D592998CE7EA7|u65f6|UC591C95F456FE6807|u4e0b|UC767D592998CE5411|UC98CE5411|UC591C95F498CE5411|UC98CE7EA7|UC591C95F498CE7EA7|UC591C95F459296C14|UC767D592959296C14|UC6C146E29|UC591C95F46C146E29|UC56FE6807|u56db|u57ce|u4e94|u5728|u4e09|u4e00|UC767D59296C146E29|u5e02|u4e8c|09|u6668|u65e9|UC7F515740|06|u51cc|u516d|weather_ww|u591c|uff0c|u6bb5|u0078|u5c0a|u006a|u0030|fn|leoweather|u656c|u006c|u005f|u5458|u003f|u4f1a|u597d|u671f|u661f|u79d2|u5468|u4eca|u6240|u60a8|u5206|u5e74|u73b0|uff01|u6708|u663c|extend|each|jQuery|UC65E5|UC65F66BB5|UC5468|setInterval|eval|UC6708|UC5E74|u0075|u0031|u0038|u002d|u95f4|UC663C591C|unescape|u767d|ajax|success|url|in|script|match|dataType'.split('|'), 0, {}));
步骤2：
html
<div id="demo1"></div> <div id="demo2"></div>
步骤3：
自定义js
<script> $(function(){ $('#demo1').leoweather({ format:'<i class="icon-{图标}">{气温}℃</i><div class="time">{月}月{日}日'+ '<div>星期{周} {时}:{分}:{秒}</div>'+ '</div><p>{城市}<span>|</span>{天气}<span>|</span>{风向}{风级}级</p>' }); $("#demo2").leoweather({ format:'<p>{城市} {天气} {夜间气温}~{白天气温}℃</p>' }); }); </script>
实现起来非常简单，具体的参数标签如下表：
参数
| 说明 | |
| city | 设置显示哪一个城市的天气，不设置则自动根据IP获取城市 |
| format | 用标签设置显示内容的格式，不设置则显示默认格式 |
标签
| 演示 | 说明 | |
| {年} | 2016年 | 显示当前时间的年份，如：2016 |
| {月} | 12月 | 显示当前时间的月份，如：08 |
| {日} | 26日 | 显示当前时间的日期，如：16 |
| {时} | 14时 | 显示当前时间的小时，如：14，当只定义了小时，没有定义分钟和秒钟，则计时器每小时跳动一次 |
| {分} | 09分 | 显示当前时间的分钟，如：38，当只定义了分钟，没有定义秒钟，则计时器每分钟跳动一次 |
| {秒} | 56秒 | 显示当前时间的年份，如：57，当只定义了秒钟，则计时器每秒跳动一次 |
| {周} | 星期一 | 显示当前时间是周几，如：日、一、二、三、四、五、六 |
| {时段} | 下午 | 显示当前时间的时段，如：上午、中午、下午、傍晚、晚上、凌晨 |
| {昼夜} | 白天 | 显示当前时段是白天还是黑夜，如：白天、夜间 |
| {城市} | 南京 | 显示城市名称 |
| {天气} | 小雨 | 显示当前城市天气，如：阵雨、晴、多云、阴 |
| {气温} | 8 | 显示当前城市气温，如：30、24 |
| {风向} | 北风 | 显示当前城市风向，如：无持续风向、北风 |
| {风级} | 3-4 | 显示当前城市风级，如：≤3、≤2、≤1 |
| {图标} | xiaoyu | 显示当前城市天气英文，如：qing、duoyun，可用于拓展图标：<img src='img/weather/{图标}.jpg'> |
| 特别说明 | 如果需要独立提取白天或者夜间的天气数据，可以使用：{白天}或者{夜间}标签提取，如：{白天气温} 当只定义了时间标签，如年月日时分秒时段昼夜，则插件不读取天气数据 当只定义了天气标签，如：城市天气气温风向风级图标白天夜间，插件则不读取时间 |
|
以上就是该插件具体的使用方法，可以根据自己的需要选择相应的参数，修改样式等等。
