纯javascript版天气预报

最新推荐文章于 2024-09-04 18:00:00 发布
最新推荐文章于 2024-09-04 18:00:00 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： javascript学习笔记

转载地址:  http://www.cnblogs.com/blue-lg/archive/2012/03/04/2379564.html


html:

View Code 
 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <title>js版天气预报</title>
 
 <link href="prviate.css" rel="stylesheet" type="text/css">
 <script src="jquery.js"></script>
 <script src="weather.js" language="javascript" type="text/javascript" charset="UTF-8"></script>
 </head>
 <body>
 <div class="clear_36"></div>
 <form action="#" onSubmit="return false;">
     <dl class="weather_case">
         <dt class="weather_search_def"><a href="http://daluzai.net/"><img src="./skin/dalz.jpg"></a></dt>
         <dd class="weather_search_v form_val" id="weather_search"><input name="city" type="text" />    
         </dd>
         <dd  class="common_front weather_conn form_sub" id="weather_sub">
             <input name="call" type="button" value="查询" title="查询天气预报" />
         </dd>
         <dd class="weather_author" id="weather_author"><p>查看源码</p></dd>
         <p style='color:#f0f'>天气查询小帮手</p>
     </dl>
 </form>
 <div class="clear_13"></div>
 <div class="weather_res_case common_hide" id="weather_res_case">
     <dl class="weather_res_item weather_res_stoday">
         <dd><b id="city"></b></dd>
         <dd>实时气温:<span id="temperature"></span></dd>
         <dd>天气情况:<span id="weather"></span></dd>
         <dd>风向:<span id="direction"></span></dd>
         <dd>风力情况:<span id="wind"></span></dd>
     </dl>
     <dl class="weather_res_item weather_res_today">
         <dd class="weather_res_dis_img" id="T_weather_img"></dd>
         <dd>
             <h2>今天</h2>
         </dd>
         <dd>天气情况:<span id="T_weather"></span></dd>
         <dd>气温:<span id="T_temperature"></span></dd>
         <dd>风向:<span id="T_direction"></span></dd>
     </dl>
     <dl class="weather_res_item weather_res_tmw">
         <dd class="weather_res_dis_img" id="M_weather_img"></dd>
         <dd>
             <h2>明天</h2>
         </dd>
         <dd>天气情况:<span id="M_weather"></span></dd>
         <dd>气温:<span id="M_temperature"></span></dd>
         <dd>风向:<span id="M_direction"></span></dd>
     </dl>
     <dl class="weather_res_item weather_res_aftmw">
         <dd class="weather_res_dis_img"  id="L_weather_img"></dd>
         <dd>
             <h2>后天</h2>
         </dd>
         <dd>天气情况:<span id="L_weather"></span></dd>
         <dd>气温:<span id="L_temperature"></span></dd>
         <dd>风向:<span id="L_direction"></span></dd>
     </dl>
     <div class="clear_debug"></div>
 </div>
 <div class="clear_13"></div>
 <script type="text/javascript">
 //创建天气预报核心对象
 var weather_=new weather();
 
 //输入框的默认提示
 def_value('weather_search','请输入要查询的城市天气');
 
 //监听用户事件
 onEvent.onEvent();
 
 </script>
 </body>
 </html>

weather.js ： 

View Code 
 var weather=function(){
     var tmp=0;
     style='qq';
     var SWther={};
     this.getWeather=function(city){//根据city的值获取天气信息
         $.getScript("http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city="+city+"&dfc=3",function(){echo(city);});
     }
     function dis_img(weather){//显示不同天气对应的图片
         var route="./skin/weather/";//文件夹路径
         if(style=='unknow'){var forder='unknow';}
           else{var forder='qq';}
         var style_img=route+forder+"/s_13.png";
         if(weather.indexOf("多云")!==-1||weather.indexOf("晴")!==-1){//多云转晴，以下类同 indexOf:包含字串
             style_img=route+forder+"/s_1.png";}
         else if(weather.indexOf("多云")!==-1&&weather.indexOf("阴")!==-1){
             style_img=route+forder+"/s_2.png";}
         else if(weather.indexOf("阴")!==-1&&weather.indexOf("雨")!==-1){
             style_img=route+forder+"/s_3.png";}
         else if(weather.indexOf("晴")!==-1&&weather.indexOf("雨")!==-1){
             style_img=route+forder+"/s_12.png";}
         else if(weather.indexOf("晴")!==-1&&weather.indexOf("雾")!==-1){
             style_img=route+forder+"/s_12.png";}
         else if(weather.indexOf("晴")!==-1){style_img=route+forder+"/s_13.png";}
         else if(weather.indexOf("多云")!==-1){style_img=route+forder+"/s_2.png";}
         else if(weather.indexOf("阵雨")!==-1){style_img=route+forder+"/s_3.png";}
         else if(weather.indexOf("小雨")!==-1){style_img=route+forder+"/s_3.png";}
         else if(weather.indexOf("中雨")!==-1){style_img=route+forder+"/s_4.png";}
         else if(weather.indexOf("大雨")!==-1){style_img=route+forder+"/s_5.png";}
         else if(weather.indexOf("暴雨")!==-1){style_img=route+forder+"/s_5.png";}
         else if(weather.indexOf("冰雹")!==-1){style_img=route+forder+"/s_6.png";}
         else if(weather.indexOf("雷阵雨")!==-1){style_img=route+forder+"/s_7.png";}
         else if(weather.indexOf("小雪")!==-1){style_img=route+forder+"/s_8.png";}
         else if(weather.indexOf("中雪")!==-1){style_img=route+forder+"/s_9.png";}
         else if(weather.indexOf("大雪")!==-1){style_img=route+forder+"/s_10.png";}
         else if(weather.indexOf("暴雪")!==-1){style_img=route+forder+"/s_10.png";}
         else if(weather.indexOf("扬沙")!==-1){style_img=route+forder+"/s_11.png";}
         else if(weather.indexOf("沙尘")!==-1){style_img=route+forder+"/s_11.png";}
         else if(weather.indexOf("雾")!==-1){style_img=route+forder+"/s_12.png";}
         else{style_img=route+forder+"/s_2.png";}
         
         return style_img;
     }
 function echo(city){
     //console.log(window);
     //console.log(window.SWther.w[city]);
     if(window.SWther.w[city]===undefined){alert('请输入一个正确的城市名称');return false;}
     uisy.query('return');
     $('#city').html(city);
     $('#weather').html(window.SWther.w[city][0].s1);
     $('#temperature').html(window.SWther.w[city][0].t1+'°');
     $('#wind').html(window.SWther.w[city][0].p1);
     $('#direction').html(window.SWther.w[city][0].d1);
     $('#T_weather').html(window.SWther.w[city][0].s1);
     var T_weather_img=dis_img(window.SWther.w[city][0].s1);//今天天气的参数传递
     $('#T_weather_img').html("<img src='"+T_weather_img+"' title='"+window.SWther.w[city][0].s1+"' alt='"+window.SWther.w[city][0].s1+"' />");
     $('#T_temperature').html(window.SWther.w[city][0].t1+'° ~ '+window.SWther.w[city][0].t2+' °');
     $('#T_wind').html(window.SWther.w[city][0].p1);
     $('#T_direction').html(window.SWther.w[city][0].d1);
     $('#M_weather').html(window.SWther.w[city][1].s1);
     var M_weather_img=dis_img(window.SWther.w[city][1].s1);
     $('#M_weather_img').html("<img src='"+M_weather_img+"' title='"+window.SWther.w[city][1].s1+"' alt='"+window.SWther.w[city][1].s1+"' />");
     $('#M_temperature').html(window.SWther.w[city][1].t1+'° ~ '+window.SWther.w[city][1].t2+' °');
     $('#M_wind').html(window.SWther.w[city][1].p1);
     $('#M_direction').html(window.SWther.w[city][1].d1);
     $('#L_weather').html(window.SWther.w[city][2].s1);
     var L_weather_img=dis_img(window.SWther.w[city][2].s1);
     $('#L_weather_img').html("<img src='"+L_weather_img+"' title='"+window.SWther.w[city][2].s1+"' alt='"+window.SWther.w[city][2].s1+"' />");
     $('#L_temperature').html(window.SWther.w[city][2].t1+'° ~ '+window.SWther.w[city][2].t2+' °');$('#L_wind').html(window.SWther.w[city][2].p1);
     $('#L_direction').html(window.SWther.w[city][2].d1);
     }
 }
     
 var uisy={
         query:function(ent){//切换状态
             if(ent=='search'){
                 $('#weather_sub >input').disabled===true;
                 $('#weather_res_case').fadeOut(500,function(){$(this).addClass('common_hide')})}
             else if(ent=='return'){//出现下面的元素
                 $('#weather_sub >input').disabled===false;
                 $('#weather_res_case').fadeIn(500,function(){$(this).removeClass('common_hide')})}}
         }
 var onEvent={
         onEvent:function(){
             var has_daluzai=onEvent.daluzai();
             if(has_daluzai===true){
                 $('#weather_sub >input').click(function(){onEvent.searchWeather();})
                     Enter_Ctrl('weather_search',13,"onEvent.searchWeather()");}},
         searchWeather:function(){
                     uisy.query('search');
                     var city=$('#weather_search >input').val();
                     city=$.trim(city);weather_.getWeather(city);},
         daluzai:function(){
                         var has_author=$('#weather_author');
                         if(has_author.length===0){return false;}
                         else{has_author.click(function(){go_URL('blank','http://www.cnblogs.com/blue-lg/archive/2012/03/04/2379564.html');})
                             return true;}},
         killError:function(){
                        function killErrors(){return true;}
                        window.οnerrοr=killErrors;}
 }
 
 //页面以某方式跳转到某页面
 function go_URL(type,url){if(type=='blank'){window.open(url,'');}else{window.location=url;}}
 
 //利用keycode=13使得回车与点击查询按钮功能一致
 function Enter_Ctrl(get_id,ent,fun){
     if(typeof(get_id)=='undefined'||get_id==''){//若get_id对象非空，则绑定keypress事件！
         var set_obj=$(document);}
     else{var set_obj=$('#'+get_id);}
     
     if(ent==13){
         set_obj.keypress(function(e){if(e.which==13||e.which==10){eval(fun);}})}
     else{set_obj.keypress(function(e){if(e.ctrlKey&&e.which==13||e.which==10){eval(fun);}})}
     
 }
 //
 function def_value(get_id,msg){//输入框的默认提示
     var set_obj=$('#'+get_id).find('input');
     if(set_obj.val()==""){
         set_obj.val(msg);
         set_obj.css('color','#949494');
     }
     set_obj.click(function(){
         if($(this).val()==msg){
             $(this).val('');
             set_obj.css('color','');
         }});
     set_obj.bind("blur",function(){
         if($(this).val()==''){
             $(this).val(msg);
             set_obj.css('color','#949494');
         }});
 }

注意点：

1.核心技术在于通过

$.getScript("http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city="+city+"&dfc=3",function(){echo(city);});}

function echo(city){
    //console.log(window.SWther.w[city]);
    if(window.SWther.w[city]===undefined){alert('请输入一个正确的城市名称');return false;}
      /* 剩下的就是对window.SWther.w[city][0]进行复制操作了*/
//
//
//
}

利用firebug，输出window.SWther.w[city]对象的值，发现结果如下所示：

该对象的d1/d2等值分别对应白天和晚上的天气状况，据此我们就可以轻松的使用html()进行赋值，以及图片的对应选择！

s: 天气情况

d: 风向

p: 风力情况

t: 气温


2.文档使用了jquery.js，主要是利用了其中的fadein和fadeout显示效果，读者可以自行添加此js文件。


3.文件下载地址：

js天气预报


abxn2002
关注
专栏目录
JavaScript:天气预报的实现
weixin_45631296的博客
03-26 1882
1.css文件： <1>index.css body { font-family: 'Microsoft YaHei'; } .wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */ /* background:#8fd5f4; */ /* background: linea
javascript天气预报 网页
11-06
javascript天气预报 网页！！！！！！！！！！！！！！
JavaScript 天气预报
dczjn9698的博客
11-01 242
var localStorage= new Object();localStorage.cityId='';function getWeather(){if(!localStorage.cityId){var cityId='';var userLatLng = new google.maps.LatLng(geoip_latitude(), geoip_longitude());v...
JavaScript网页设计案例：天气
最新发布
s8305057的博客
09-04 882
当你尝试使用 OpenWeatherMap API 并收到 401 (Unauthorized) 错误时，这通常意味着你的 API 密钥没有被正确识别或者没有被包含在你的请求中。同时，确保你的 API 密钥没有泄露给其他人，因为这可能会导致你的密钥被禁用。如果你的应用需要更高的请求频率或更多的功能，你可能需要考虑升级到付费计划。：一旦你获得了 API 密钥，你可以在 API 请求的 URL 中使用它来获取天气数据。：OpenWeatherMap 提供了多个版本的 API，确保你使用的是正确的版本。
html javascript 天气预报 （内附源代码）
02-05
仿照webQQ的天气样式做的一个天气预报，使用中国天气的数据源
纯CSS3扁平风格天气预报卡片动画特效
12-13
【纯CSS3扁平风格天气预报卡片动画特效】是一种创新且引人入胜的前端设计技术，它利用了CSS3的强大功能，为用户提供了一种视觉上吸引人的天气展示方式。这个特效将不同的天气条件，如下雨、闪电、白天、夜晚和下雪，...
大陆仔天气预报，JS版的天气预报 v1.0
05-12
摘要:脚本资源,Ajax/JavaScript,大陆仔,天气预报　大陆仔天气预报是一个纯JS版的天气预报，调用了新浪的天气预报接口实现。具体功能如下： 　支持根据用户IP来显示当地的天气预报 （使用了魔镜的 API） 　支持用户...
纯CSS3扁平风格天气预报卡片动画特效源码.zip
11-01
【标题】中的“纯CSS3扁平风格天气预报卡片动画特效源码”表明这是一个使用CSS3技术实现的、具有扁平化设计风格的天气预报显示组件。这种组件通常用于网站或者应用中，提供实时或预设的天气信息，并且带有吸引人的...
react-weather-app:这是一个使用JSX，纯JavaScript和CSS构建的React天气应用程序。 它允许您通过城市搜索来检查实际的天气和天气预报，以及接下来5天的最大值。 和分钟。 温度，使用AJAX API调用
04-05
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
Javascript——天气预报API
sysu_lsq的专栏
01-23 1346
接之前所写关于百度地图API所提供的显示地理位置信息的功能，我们也可以加入显示天气预报的API，从而使用户可以通过自己的网页看到天气预报。 以下为笔者所写的一份简单测试代码。 首先连接百度地图API。 其次使用显示天气预报的元素。lbs-weather中，笔者同样将city属性默认为广州。 天气预报 body, html,#allmap {width:
原生JS实现天气预报
11-20
本文实例为大家分享了JS实现天气预报的具体代码，供大家参考，具体内容如下 HTML代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
js实现天气预报 很实用
06-02
js实现天气预报 很实用 js实现天气预报 很实用
js天气预报
12-25
这几天突发奇想，突然想自己写一个js跨域访问天气的接口然后实现天气预报功能的小例子 但是jquery跨域访问的时候出现了点问题 上csdn上晃悠了一大圈发现大多是答非所问 不少东西花积分下载之后 例子里面根本就只提供了个接口 没有例子 更有甚者 直接一个iframe 把页面镶嵌进去了 所以进过我几天的努力（时间不多 挤出来的） 终于弄了个完整的例子 若果有想要这个方法的 可以下载
JS版的天气预报 v1.0
01-02
摘要:脚本资源,Ajax/JavaScript,大陆仔,天气预报 　　大陆仔天气预报是一个纯JS版的天气预报，调用了新浪的天气预报接口实现。具体功能如下： 　　支持根据用户IP来显示当地的天气预报 （使用了魔镜的 API） 　　支持用户搜索中国和国外城市的天气预报 　　将能够查询未来两天的天气情况。 　　 　　特别说明：大陆仔产品一直遵循一个原则，CSS样式从来不用ID定义。所以，在修改皮肤时请不要使用ID定义样式，以免于JS的使用发生冲突。
JS实现天气预报查询
法拉驴出品
12-19 7902
样品展示 HTML &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;全国天气查询小应用&lt;/title&gt; &lt;link rel="stylesheet" h
天气预报js
ntkd7360的专栏
11-19 722
http://www.w3.org/1999/xhtml"> 天气预报 body,td,th { font-size: 12px; } body { margin-top: 5px; } a:link { color: #000000; text-decoration: none; } a:visited { text-decoration: none;
html 天气预报开发,html javascript 天气预报 （内附源代码）
weixin_35650074的博客
06-04 2228
【实例简介】仿照webQQ的天气样式做的一个天气预报，使用中国天气的数据源【实例截图】【核心代码】天气预报└── weatherWidget├── bg-main-mini.png├── btn-more-normal.png├── button-normal.png├── chinaWeather.js├── weather_0.png├── weather_10.png├── weather_...
原生JavaScript实现天气预报示例及代码
本文将详细介绍如何使用原生JavaScript实现一个基本的天气预报应用。首先，我们从HTML结构开始，创建了一个简单的网页布局，包括搜索功能、历史记录模块、今日天气展示、天气预报以及生活指数部分。以下是对这些关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值