又挖到了一个天气Api接口(附使用示例)

网上的大多数天气接口要么是收费的,要么只支持 iframe 嵌入方式,根本就没法用……

今天“不小心”从 360 那挖到了一个支持 json 的天气接口,支持自动判断地区,获取最近五天的天气,支持天气相关信息展示。非常好用!

接口请求格式如下:

  1. http://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=360chrome&code=【地区编码】&_jsonp=【jsonp回调函数】  

其中的 地区编码 与中国天气网的地区编码是一样的。如果不设置这个参数,则默认显示本地的天气状况。

点击查看演示

简易的调用示例源码如下:(请自行进行界面美化)

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>天气接口使用示例</title>
  6. <style>
  7. body {  
  8.     font-family: microsoft yahei;  
  9. }  
  10. </style>
  11. <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  12. </head>
  13. <body>
  14. <div id="output"></div>
  15. <script type="text/javascript" charset="utf-8">
  16.     $.ajax({  
  17.         type: "GET",   
  18.         url: "http://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=360chrome",  
  19.         dataType : "jsonp",  
  20.         jsonp: "_jsonp",//参数名  
  21.         success: function(jsonData){  
  22.             var html;  
  23. html = '数据更新时间:' + jsonData.pubdate + ' ' + jsonData.pubtime + '<br>';  
  24.             html += '地区:' + jsonData.area[0][0] + ' ' + jsonData.area[1][0] + ' ' + jsonData.area[2][0] + '<br>';  
  25.             html += '天气情况:<br>';  
  26.             for(var i =0; i<jsonData.weather.length; i++) {  
  27.                 html += jsonData.weather[i].date + '<br>';  
  28.                 if(jsonData.weather[i].info.dawn !== undefined) {  
  29.                     html += '早晨天气:' + jsonData.weather[i].info.dawn[1] +   
  30.                     ' 气温:' + jsonData.weather[i].info.dawn[0] + '~' + jsonData.weather[i].info.dawn[2] + '℃ ' +  
  31.                     jsonData.weather[i].info.dawn[3] +' '+ jsonData.weather[i].info.dawn[4] + '<br>';  
  32.                 }  
  33.                 if(jsonData.weather[i].info.day !== undefined) {  
  34.                     html += '白天天气:' + jsonData.weather[i].info.day[1] +   
  35.                     ' 气温:' + jsonData.weather[i].info.day[0] + '~' + jsonData.weather[i].info.day[2] + '℃ ' +  
  36.                     jsonData.weather[i].info.day[3] +' '+ jsonData.weather[i].info.day[4] + '<br>';  
  37.                 }  
  38.                 if(jsonData.weather[i].info.night !== undefined) {  
  39.                     html += '夜间天气:' + jsonData.weather[i].info.night[1] +   
  40.                     ' 气温:' + jsonData.weather[i].info.night[0] + '~' + jsonData.weather[i].info.night[2] + '℃ ' +  
  41.                     jsonData.weather[i].info.night[3] +' '+ jsonData.weather[i].info.night[4] + '<br>';  
  42.                 }  
  43.                 html += '<br>';  
  44.             }  
  45.             html += '穿衣:<br>';  
  46.             html += '【' + jsonData.life.info.chuanyi[0] + '】 ' + jsonData.life.info.chuanyi[1] + '<br><br>';  
  47.             html += '感冒:<br>';  
  48.             html += '【' + jsonData.life.info.ganmao[0] + '】 ' + jsonData.life.info.ganmao[1] + '<br><br>';  
  49.             html += '空调:<br>';  
  50.             html += '【' + jsonData.life.info.kongtiao[0] + '】 ' + jsonData.life.info.kongtiao[1] + '<br><br>';  
  51.             html += '污染:<br>';  
  52.             html += '【' + jsonData.life.info.wuran[0] + '】 ' + jsonData.life.info.wuran[1] + '<br><br>';  
  53.             html += '洗车:<br>';  
  54.             html += '【' + jsonData.life.info.xiche[0] + '】 ' + jsonData.life.info.xiche[1] + '<br><br>';  
  55.             html += '运动:<br>';  
  56.             html += '【' + jsonData.life.info.yundong[0] + '】 ' + jsonData.life.info.yundong[1] + '<br><br>';  
  57.             html += '紫外线:<br>';  
  58.             html += '【' + jsonData.life.info.ziwaixian[0] + '】 ' + jsonData.life.info.ziwaixian[1] + '<br><br>';  
  59.             html += 'PM2.5: ' + jsonData.pm25.pm25[0];  
  60.             $("#output").html(html);  
  61.         }  
  62.     });  
  63. </script>
  64. </body>
  65. </html>

附:其它天气接口

天气网的接口(只支持iframe方式调用,修改后面的数字可以展示为其它样式) http://i.tianqi.com/index.php?c=code&id=55

2345天气(只支持iframe方式调用,支持自定义样式) http://tianqi.2345.com/plugin/

中国天气网(只支持iframe方式调用,支持自定义地区) http://m.weather.com.cn/m/pn11/weather.htm

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6718
来自专栏魂祭心

原 canvas绘制clock

4044
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2516
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5287
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2625
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5346
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4054
来自专栏ASP.NETCore

ASP.NET Core 整合Autofac和Castle实现自动AOP拦截

除了ASP.NETCore自带的IOC容器外,我们还可以使用其他成熟的DI框架,如Autofac,StructureMap等(笔者只用过Unity,Ninjec...

674
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2682

扫码关注云+社区