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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 Javascript
遍历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邮件专题
2006/10/09 PHP
最简单的PHP程序--记数器
2006/10/09 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
PHP防止跨域提交表单
2013/11/01 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python生成器推导式用法简单示例
2019/10/08 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
岗位聘任书范文
2014/03/29 职场文书
中专生自荐信
2014/06/25 职场文书
员工安全生产责任书
2014/07/22 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2015年工程师工作总结
2015/04/30 职场文书
行政答辩状范文
2015/05/21 职场文书