最簡單的天氣組件

在有些頁面中咱們經常用到一些天氣的插件，網上會提供一些免費的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>星期{周}&nbsp;&nbsp;{時}:{分}:{秒}</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，當只定義了秒鐘，則計時器每秒跳動一次
{周}	星期一	顯示當前時間是周幾，如：日、1、2、3、4、5、六
{時段}	下午	顯示當前時間的時段，如：上午、中午、下午、傍晚、晚上、凌晨
{晝夜}	白天	顯示當前時段是白天仍是黑夜，如：白天、夜間
{城市}	南京	顯示城市名稱
{天氣}	小雨	顯示當前城市天氣，如：陣雨、晴、多雲、陰
{氣溫}	8	顯示當前城市氣溫，如：30、24
{風向}	北風	顯示當前城市風向，如：無持續風向、北風
{風級}	3-4	顯示當前城市風級，如：≤三、≤二、≤1
{圖標}	xiaoyu	顯示當前城市天氣英文，如：qing、duoyun，可用於拓展圖標：<img src='img/weather/{圖標}.jpg'>
特別說明	若是須要獨立提取白天或者夜間的天氣數據，可使用：{白天}或者{夜間}標籤提取，如：{白天氣溫} 當只定義了時間標籤，如年月日時分秒時段晝夜，則插件不讀取天氣數據 當只定義了天氣標籤，如：城市天氣氣溫風向風級圖標白天夜間，插件則不讀取時間

以上就是該插件具體的使用方法，能夠根據本身的須要選擇相應的參數，修改樣式等等。