jquery和雅虎的yql服务实现天气预报服务示例


Posted in Javascript onFebruary 08, 2014

本代码不涉及任何后端开发代码(如.Net,JAVA等)。目前最权威的天气预报数据是中国天气网(http://www.weather.com.cn/),因为这个是官方提供的气象数据,除了商业的增值服务外,还提供了免费的以JSON数据格式返回的气象数据,以查看杭州的天气数据为例,可以输入以下地址:http://m.weather.com.cn/data/101210101.html ,返回的JSON数据格式如下图:

YQL服务可以实现对网上不同数据源的query,filter,combine(查询,过滤,合并),提供类似SQL,具体地址如下:http://developer.yahoo.com/yql/console/ 。当实施查询的时候,YQL服务就会访问网络上的数据源,传输数据,返回XML或者JSON形式的数据结果。YQL可以使用许多类型的数据源,包括Yahoo!Web services 或者其他的网络服务,和网络数据类型例如:HTML, XML, RSS,和Atom。

因此可以通过两者的结合使用,完成天气预报功能的开发,具体JS代码如下:

jquery和雅虎的yql服务实现天气预报服务示例

function getWeather() {             $.getJSON("http://query.yahooapis.com/v1/public/yql", {
                 q: "select * from json where url=\"http://m.weather.com.cn/data/101210101.html\"",
                format: "json"
            }, function (data) {
                if (data.query.results) {
                    //$("#content").text(JSON.stringify(data.query.results));
                    var J_data = JSON.parse(JSON.stringify(data.query.results));
                     //alert(J_data.weatherinfo.city);
                       $("#content").append("<p>"+J_data.weatherinfo.city+"天气预报(数据来源中国天气网)"+"</p>");
                     $("#content").append("<p>"+J_data.weatherinfo.date_y+" "+J_data.weatherinfo.week+" "+J_data.weatherinfo.temp1+" "+J_data.weatherinfo.weather1+" "+J_data.weatherinfo.wind1+" "+J_data.weatherinfo.index+" "+J_data.weatherinfo.index_d+"</p>");
                     var t= J_data.weatherinfo.date_y;
                     t=t.replace("年","/");
                     t=t.replace("月","/");
                     t=t.replace("日","");

                     var tdy = new Date(t);  
                     var t2 = new Date();       
                   
                      t2.setDate(tdy.getDate()+1);
                    
                      $("#content").append("<p>"+ t2.Format("yyyy年MM月dd日")+" "+getweekdays(t2)+" "+J_data.weatherinfo.temp2+" "+J_data.weatherinfo.weather2+" "+J_data.weatherinfo.wind2+"</p>");
                       var t3 = new Date();
                      t3.setDate(tdy.getDate()+2);
                      $("#content").append("<p>"+t3.Format("yyyy年MM月dd日")+" "+getweekdays(t3)+" "+J_data.weatherinfo.temp3+" "+J_data.weatherinfo.weather3+" "+J_data.weatherinfo.wind3+"</p>");
                      var t4 = new Date();
                      t4.setDate(tdy.getDate()+3);
                      $("#content").append("<p>"+t4.Format("yyyy年MM月dd日")+" "+getweekdays(t4)+" "+J_data.weatherinfo.temp4+" "+J_data.weatherinfo.weather4+" "+J_data.weatherinfo.wind4+"</p>");
                      var t5 = new Date();
                      t5.setDate(tdy.getDate()+4);
                      $("#content").append("<p>"+t5.Format("yyyy年MM月dd日")+" "+getweekdays(t5)+" "+J_data.weatherinfo.temp5+" "+J_data.weatherinfo.weather5+" "+J_data.weatherinfo.wind5+"</p>");
                      var t6 = new Date();
                      t6.setDate(tdy.getDate()+5);
                      $("#content").append("<p>"+t6.Format("yyyy年MM月dd日")+" "+getweekdays(t6)+" "+J_data.weatherinfo.temp6+" "+J_data.weatherinfo.weather6+" "+J_data.weatherinfo.wind6+"</p>");
 
                     //alert(getweekdays(t2)); 
                } else {
                     $("#content").text('no such code: ' + code);
                 }
             });
          //$.getJSON("http://m.weather.com.cn/data/101210101.html", null, function(json) { alert(json); });             
        }
        function getweekdays(datey)
        {
           if(datey.getDay()==0)
           {
             return "星期日";
           }
           else if(datey.getDay()==1)
           {
              return "星期一";
           }
           else if(datey.getDay()==2)
           {
              return "星期二";
           }
           else if(datey.getDay()==3)
           {
              return "星期三";
           }
           else if(datey.getDay()==4)
           {
              return "星期四";
           }
           else if(datey.getDay()==5)
           {
              return "星期五";
           }
           else if(datey.getDay()==6)
           {
              return "星期六";
           }
 
        }

最终实现的效果,如下图:

jquery和雅虎的yql服务实现天气预报服务示例

Javascript 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
Javascript的闭包详解
Dec 26 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
js中的this的指向问题详解
Aug 29 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
遍历DOM对象内的元素属性示例代码
Feb 08 #Javascript
JS的参数传递示例介绍
Feb 08 #Javascript
js控制分页打印、打印分页示例
Feb 08 #Javascript
javascript中的self和this用法小结
Feb 08 #Javascript
javascript中match函数的用法小结
Feb 08 #Javascript
纯JS实现动态时间显示代码
Feb 08 #Javascript
js数字转换为float,取N位小数
Feb 08 #Javascript
You might like
php中显示数组与对象的实现代码
2011/04/18 PHP
深入PHP FTP类的详解
2013/06/13 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
vue-cli随机生成port源码的方法
2019/09/02 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
Python iter()函数用法实例分析
2018/03/17 Python
python中返回矩阵的行列方法
2018/04/04 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python中字符串与编码示例代码
2019/05/20 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
如何写好优秀的创业计划书
2014/01/30 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
商品陈列协议书
2014/09/29 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
Python 图片添加美颜效果
2022/04/28 Python