当前位置: 首页 > news >正文

为自己的网站添加天气显示

360API接口模式:
其中的 地区编码 与中国天气网的地区编码是一样的。如果不设置这个参数,则默认显示本地的天气状况。如重庆地区编码为101040100,即url引用变成下面代码

https://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=360chrome&code=101040100

地区编码查询

以下代码是一段简单调用接口的示例,根据里面的参数调整成自己想要的数据格式即可。

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>天气接口使用示例</title>  
<style>  
body {  
    font-family: microsoft yahei;  
}  
</style>  
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  
</head>  
<body>  
  
<div id="output"></div>  
  
<script type="text/javascript" charset="utf-8">  
      
    $.ajax({  
        type: "GET",   
        url: "http://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=360chrome",  
        dataType : "jsonp",  
        jsonp: "_jsonp",//参数名  
        success: function(jsonData){  
            var html;  
            html = '数据更新时间:' + jsonData.pubdate + ' ' + jsonData.pubtime + '';  
              
            html += '地区:' + jsonData.area[0][0] + ' ' + jsonData.area[1][0] + ' ' + jsonData.area[2][0] + '';  
            html += '天气情况:';  
              
            for(var i =0; i<jsonData.weather.length; i++) {  
                html += jsonData.weather[i].date + '';  
                  
                if(jsonData.weather[i].info.dawn !== undefined) {  
                    html += '早晨天气:' + jsonData.weather[i].info.dawn[1] +   
                    ' 气温:' + jsonData.weather[i].info.dawn[0] + '~' + jsonData.weather[i].info.dawn[2] + '' +  
                    jsonData.weather[i].info.dawn[3] +' '+ jsonData.weather[i].info.dawn[4] + '';  
                }  
                  
                if(jsonData.weather[i].info.day !== undefined) {  
                    html += '白天天气:' + jsonData.weather[i].info.day[1] +   
                    ' 气温:' + jsonData.weather[i].info.day[0] + '~' + jsonData.weather[i].info.day[2] + '' +  
                    jsonData.weather[i].info.day[3] +' '+ jsonData.weather[i].info.day[4] + '';  
                }  
                  
                if(jsonData.weather[i].info.night !== undefined) {  
                    html += '夜间天气:' + jsonData.weather[i].info.night[1] +   
                    ' 气温:' + jsonData.weather[i].info.night[0] + '~' + jsonData.weather[i].info.night[2] + '' +  
                    jsonData.weather[i].info.night[3] +' '+ jsonData.weather[i].info.night[4] + '';  
                }  
                html += '';  
            }  
              
            html += '穿衣:';  
            html += '' + jsonData.life.info.chuanyi[0] + '' + jsonData.life.info.chuanyi[1] + '';  
              
            html += '感冒:';  
            html += '' + jsonData.life.info.ganmao[0] + '' + jsonData.life.info.ganmao[1] + '';  
              
            html += '空调:';  
            html += '' + jsonData.life.info.kongtiao[0] + '' + jsonData.life.info.kongtiao[1] + '';  
              
            html += '污染:';  
            html += '' + jsonData.life.info.wuran[0] + '' + jsonData.life.info.wuran[1] + '';  
              
            html += '洗车:';  
            html += '' + jsonData.life.info.xiche[0] + '' + jsonData.life.info.xiche[1] + '';  
              
            html += '运动:';  
            html += '' + jsonData.life.info.yundong[0] + '' + jsonData.life.info.yundong[1] + '';  
              
            html += '紫外线:';  
            html += '' + jsonData.life.info.ziwaixian[0] + '' + jsonData.life.info.ziwaixian[1] + '';  
              
            html += 'PM2.5: ' + jsonData.pm25.pm25[0];  
              
            $("#output").html(html);  
        }  
    });  
</script>  
  
</body>  
</html>  

 更多信息可以查看我的网站:秋风荡

转载于:https://www.cnblogs.com/hjjjjhd/p/11546834.html

相关文章:

  • 美行 AKG Q460 入手 (上)
  • C# 延迟初始化 LazyT
  • xampp+zend
  • 检测网站日常运行
  • Python快速教程 (手册)
  • 对于最近想读的书
  • react-------生命周期只getDerivedStateFromPros
  • SQL Server 查询远程数据库数据
  • es6和es5函数参数和arguments的差别
  • 响应式设计(Response Web Design)浅谈
  • 查询 ip占用导致ip不通的 问题 查IP对应的mac地址
  • 删除MyEclipse 6.5.1自带的Maven4MyEclipse
  • ulimt 和 sysctl
  • linux /etc/profile bashrc bash_profile
  • 多服务器的日志合并统计——apache日志的cronolog轮循
  • 【翻译】Mashape是如何管理15000个API和微服务的(三)
  •  D - 粉碎叛乱F - 其他起义
  • fetch 从初识到应用
  • golang 发送GET和POST示例
  • iOS 颜色设置看我就够了
  • JavaScript HTML DOM
  • Java面向对象及其三大特征
  • jquery cookie
  • learning koa2.x
  • Linux CTF 逆向入门
  • ReactNative开发常用的三方模块
  • Redis 懒删除(lazy free)简史
  • Shadow DOM 内部构造及如何构建独立组件
  • SpringBoot 实战 (三) | 配置文件详解
  • WordPress 获取当前文章下的所有附件/获取指定ID文章的附件(图片、文件、视频)...
  • 初探 Vue 生命周期和钩子函数
  • 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • 你不可错过的前端面试题(一)
  • 前端性能优化--懒加载和预加载
  • 实战|智能家居行业移动应用性能分析
  • 视频flv转mp4最快的几种方法(就是不用格式工厂)
  • 为视图添加丝滑的水波纹
  • 学习笔记DL002:AI、机器学习、表示学习、深度学习,第一次大衰退
  • 鱼骨图 - 如何绘制?
  • MPAndroidChart 教程:Y轴 YAxis
  • Play Store发现SimBad恶意软件,1.5亿Android用户成受害者 ...
  • $ git push -u origin master 推送到远程库出错
  • (超详细)2-YOLOV5改进-添加SimAM注意力机制
  • (剑指Offer)面试题34:丑数
  • (算法二)滑动窗口
  • (转)程序员技术练级攻略
  • .bat批处理(九):替换带有等号=的字符串的子串
  • .NET 4.0中使用内存映射文件实现进程通讯
  • .NET Standard、.NET Framework 、.NET Core三者的关系与区别?
  • .net 反编译_.net反编译的相关问题
  • .NET4.0并行计算技术基础(1)
  • .net反混淆脱壳工具de4dot的使用
  • .sh 的运行
  • @Autowired和@Resource装配
  • @value 静态变量_Python彻底搞懂:变量、对象、赋值、引用、拷贝