純javascript版天氣預報

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>


下午瀏覽網站的時候,意外發現這篇博客Mygirl JavaScript 天氣預報 ,便依照作者的步驟分別新建了html和js文件,運行時瀏覽器均報了407的錯誤(訪問外部網站未授權)。

於是又查了些資料,終於在codefans上面找到希望要的效果,除此以外,還有一種常見的做法:利用iframe應用外部數據,比如下面的這個(根據ip地址判斷所在地,並顯示實時天氣狀況):

View Code
1 <iframe src="http://weather.265.com/weather.htm" width="168" height="54" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

將上述代碼嵌入到html中即可顯示效果。效果如下:

下面着重介紹另外一種"自己"編寫的js天氣預報:

View Code
 1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5 <title>js版天氣預報</title>
6
7 <link href="prviate.css" rel="stylesheet" type="text/css">
8 <script src="jquery.js"></script>
9 <script src="weather.js" language="javascript" type="text/javascript" charset="UTF-8"></script>
10 </head>
11 <body>
12 <div class="clear_36"></div>
13 <form action="#" onSubmit="return false;">
14 <dl class="weather_case">
15 <dt class="weather_search_def"><a href="http://daluzai.net/"><img src="./skin/dalz.jpg"></a></dt>
16 <dd class="weather_search_v form_val" id="weather_search"><input name="city" type="text" />
17 </dd>
18 <dd class="common_front weather_conn form_sub" id="weather_sub">
19 <input name="call" type="button" value="查詢" title="查詢天氣預報" />
20 </dd>
21 <dd class="weather_author" id="weather_author"><p>查看源碼</p></dd>
22 <p style='color:#f0f'>天氣查詢小幫手</p>
23 </dl>
24 </form>
25 <div class="clear_13"></div>
26 <div class="weather_res_case common_hide" id="weather_res_case">
27 <dl class="weather_res_item weather_res_stoday">
28 <dd><b id="city"></b></dd>
29 <dd>實時氣溫:<span id="temperature"></span></dd>
30 <dd>天氣情況:<span id="weather"></span></dd>
31 <dd>風向:<span id="direction"></span></dd>
32 <dd>風力情況:<span id="wind"></span></dd>
33 </dl>
34 <dl class="weather_res_item weather_res_today">
35 <dd class="weather_res_dis_img" id="T_weather_img"></dd>
36 <dd>
37 <h2>今天</h2>
38 </dd>
39 <dd>天氣情況:<span id="T_weather"></span></dd>
40 <dd>氣溫:<span id="T_temperature"></span></dd>
41 <dd>風向:<span id="T_direction"></span></dd>
42 </dl>
43 <dl class="weather_res_item weather_res_tmw">
44 <dd class="weather_res_dis_img" id="M_weather_img"></dd>
45 <dd>
46 <h2>明天</h2>
47 </dd>
48 <dd>天氣情況:<span id="M_weather"></span></dd>
49 <dd>氣溫:<span id="M_temperature"></span></dd>
50 <dd>風向:<span id="M_direction"></span></dd>
51 </dl>
52 <dl class="weather_res_item weather_res_aftmw">
53 <dd class="weather_res_dis_img" id="L_weather_img"></dd>
54 <dd>
55 <h2>後天</h2>
56 </dd>
57 <dd>天氣情況:<span id="L_weather"></span></dd>
58 <dd>氣溫:<span id="L_temperature"></span></dd>
59 <dd>風向:<span id="L_direction"></span></dd>
60 </dl>
61 <div class="clear_debug"></div>
62 </div>
63 <div class="clear_13"></div>
64 <script type="text/javascript">
65 //創建天氣預報核心對象
66 var weather_=new weather();
67
68 //輸入框的默認提示
69 def_value('weather_search','請輸入要查詢的城市天氣');
70
71 //監聽用戶事件
72 onEvent.onEvent();
73
74 </script>
75 </body>
76 </html>

 

private.css:

View Code
  1 @charset "utf-8";
2
3 .weather_case{
4 padding:0px 0 15px 20px;
5 width:684px;
6 margin:0 auto;
7 background:url(./skin/bar.gif) repeat-x top;
8 background-color:#FEFEFE;
9 border:1px solid #D7D7D7;
10 position:relative;
11 }
12 .weather_case dd{
13 *display:inline-block;
14 _display:inline-block;
15 }
16 .weather_search_def{
17 float:left;
18 width:150px;
19 margin:20px 0 0 0;
20 }
21 .weather_author{
22 position:absolute;
23 top:4px;
24 right:4px;
25 background-color: yellow no-repeat;
26 width:40px;
27 height:29px;
28 cursor:pointer;
29 }
30 .weather_search_v,.weather_conn{
31 margin:60px 0 0 0;
32 }
33 .weather_search_v{
34 float:left;
35 width:200px;
36 height:24px;
37 }
38 .weather_search_v input{
39 border:1px solid #D7D7D7;
40 height:20px;
41 padding:2px 4px;
42 width:190px;
43 }
44 .weather_conn{
45 float:left;
46 padding:0 13px;
47 width:90px;
48 }
49 .weather_res_case{
50 margin:auto;
51 width:704px;
52 border:1px solid #D7D7D7;
53 }
54 .weather_res_item dd{
55 list-style:none;
56 font-size:12px;
57 color:#333;
58 line-height:22px;
59 }
60 .weather_res_item dd h2{
61 margin:0px;
62 text-align:center;
63 color:#333;
64 font-size:14px;
65 font-weight:bold;
66 }
67 .weather_res_item dd b{
68 color:#960;
69 text-align:center;
70 font-size:22px;
71 overflow:hidden;
72 padding:7px 0 15px 0;
73 display:block;
74 }
75 .weather_res_item dd span{
76 padding:0 7px;
77 color:#339;
78 font-size:12px;
79 }
80 .weather_res_item{
81 float:left;
82 margin:0 auto;
83 padding:7px 13px;
84 height:150px;
85 vertical-align:middle;
86 overflow:hidden;
87 width:150px;
88 }
89 .weather_res_dis_img{
90 text-align:center;
91 width:48px;
92 height:48px;
93 overflow:hidden;
94 margin:0 auto;
95 }
96 .weather_res_stoday{
97 background:#CFEDEF;
98 }
99 .weather_res_today{
100 background:#F7F0DD;
101 }
102
103 .weather_res_tmw{
104 background:#E3EDCD;
105 }
106 .weather_res_aftmw{
107 background:#CCFFCC;
108 }
109 .weather_misc{
110 padding:13px;
111 width:678px;
112 }
113 .weather_misc_quit{
114 float:right;
115 }
116 .weather_misc p{
117 line-height:28px;
118 font-size:12px;
119 }
120 .weather_misc p span{
121 padding:0 4px;
122 font-size:12px;
123 color:#949494;
124 }
125 .weather_misc h5{
126 font-size:14px;
127 }
128 .weather_misc_v{
129 padding:0 0 13px 0;
130 }
131 .weather_misc_v input{
132 width:480px;
133 height:22px;
134 line-height:22px;
135 padding:1px 2px;
136 border:1px solid #D7D7D7;
137 font-size:12px;
138 color:#949494;
139 }
140 .weather_misc_other{
141 color:#949494;
142 }
143
144 .common_hide {
145 display:none;
146 }
147 .clear_13 {
148 height:13px;
149 margin:0 auto;
150 clear:both;
151 width:98%;
152 overflow:hidden;
153 }
154 #weather_author p{
155 font-size:10px;
156 color:#0f0;
157 }
158
159 form dl{
160 height:120px;
161 }



weather.js :

View Code
  1 var weather=function(){
2 var tmp=0;
3 style='qq';
4 var SWther={};
5 this.getWeather=function(city){//根據city的值獲取天氣信息
6 $.getScript("http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city="+city+"&dfc=3",function(){echo(city);});
7 }
8 function dis_img(weather){//顯示不同天氣對應的圖片
9 var route="./skin/weather/";//文件夾路徑
10 if(style=='unknow'){var forder='unknow';}
11 else{var forder='qq';}
12 var style_img=route+forder+"/s_13.png";
13 if(weather.indexOf("多雲")!==-1||weather.indexOf("晴")!==-1){//多雲轉晴,以下類同 indexOf:包含字串
14 style_img=route+forder+"/s_1.png";}
15 else if(weather.indexOf("多雲")!==-1&&weather.indexOf("陰")!==-1){
16 style_img=route+forder+"/s_2.png";}
17 else if(weather.indexOf("陰")!==-1&&weather.indexOf("雨")!==-1){
18 style_img=route+forder+"/s_3.png";}
19 else if(weather.indexOf("晴")!==-1&&weather.indexOf("雨")!==-1){
20 style_img=route+forder+"/s_12.png";}
21 else if(weather.indexOf("晴")!==-1&&weather.indexOf("霧")!==-1){
22 style_img=route+forder+"/s_12.png";}
23 else if(weather.indexOf("晴")!==-1){style_img=route+forder+"/s_13.png";}
24 else if(weather.indexOf("多雲")!==-1){style_img=route+forder+"/s_2.png";}
25 else if(weather.indexOf("陣雨")!==-1){style_img=route+forder+"/s_3.png";}
26 else if(weather.indexOf("小雨")!==-1){style_img=route+forder+"/s_3.png";}
27 else if(weather.indexOf("中雨")!==-1){style_img=route+forder+"/s_4.png";}
28 else if(weather.indexOf("大雨")!==-1){style_img=route+forder+"/s_5.png";}
29 else if(weather.indexOf("暴雨")!==-1){style_img=route+forder+"/s_5.png";}
30 else if(weather.indexOf("冰雹")!==-1){style_img=route+forder+"/s_6.png";}
31 else if(weather.indexOf("雷陣雨")!==-1){style_img=route+forder+"/s_7.png";}
32 else if(weather.indexOf("小雪")!==-1){style_img=route+forder+"/s_8.png";}
33 else if(weather.indexOf("中雪")!==-1){style_img=route+forder+"/s_9.png";}
34 else if(weather.indexOf("大雪")!==-1){style_img=route+forder+"/s_10.png";}
35 else if(weather.indexOf("暴雪")!==-1){style_img=route+forder+"/s_10.png";}
36 else if(weather.indexOf("揚沙")!==-1){style_img=route+forder+"/s_11.png";}
37 else if(weather.indexOf("沙塵")!==-1){style_img=route+forder+"/s_11.png";}
38 else if(weather.indexOf("霧")!==-1){style_img=route+forder+"/s_12.png";}
39 else{style_img=route+forder+"/s_2.png";}
40
41 return style_img;
42 }
43 function echo(city){
44 //console.log(window);
45 //console.log(window.SWther.w[city]);
46 if(window.SWther.w[city]===undefined){alert('請輸入一個正確的城市名稱');return false;}
47 uisy.query('return');
48 $('#city').html(city);
49 $('#weather').html(window.SWther.w[city][0].s1);
50 $('#temperature').html(window.SWther.w[city][0].t1+'&deg;');
51 $('#wind').html(window.SWther.w[city][0].p1);
52 $('#direction').html(window.SWther.w[city][0].d1);
53 $('#T_weather').html(window.SWther.w[city][0].s1);
54 var T_weather_img=dis_img(window.SWther.w[city][0].s1);//今天天氣的參數傳遞
55 $('#T_weather_img').html("<img src='"+T_weather_img+"' title='"+window.SWther.w[city][0].s1+"' alt='"+window.SWther.w[city][0].s1+"' />");
56 $('#T_temperature').html(window.SWther.w[city][0].t1+'&deg; ~ '+window.SWther.w[city][0].t2+' &deg;');
57 $('#T_wind').html(window.SWther.w[city][0].p1);
58 $('#T_direction').html(window.SWther.w[city][0].d1);
59 $('#M_weather').html(window.SWther.w[city][1].s1);
60 var M_weather_img=dis_img(window.SWther.w[city][1].s1);
61 $('#M_weather_img').html("<img src='"+M_weather_img+"' title='"+window.SWther.w[city][1].s1+"' alt='"+window.SWther.w[city][1].s1+"' />");
62 $('#M_temperature').html(window.SWther.w[city][1].t1+'&deg; ~ '+window.SWther.w[city][1].t2+' &deg;');
63 $('#M_wind').html(window.SWther.w[city][1].p1);
64 $('#M_direction').html(window.SWther.w[city][1].d1);
65 $('#L_weather').html(window.SWther.w[city][2].s1);
66 var L_weather_img=dis_img(window.SWther.w[city][2].s1);
67 $('#L_weather_img').html("<img src='"+L_weather_img+"' title='"+window.SWther.w[city][2].s1+"' alt='"+window.SWther.w[city][2].s1+"' />");
68 $('#L_temperature').html(window.SWther.w[city][2].t1+'&deg; ~ '+window.SWther.w[city][2].t2+' &deg;');$('#L_wind').html(window.SWther.w[city][2].p1);
69 $('#L_direction').html(window.SWther.w[city][2].d1);
70 }
71 }
72
73 var uisy={
74 query:function(ent){//切換狀態
75 if(ent=='search'){
76 $('#weather_sub >input').disabled===true;
77 $('#weather_res_case').fadeOut(500,function(){$(this).addClass('common_hide')})}
78 else if(ent=='return'){//出現下面的元素
79 $('#weather_sub >input').disabled===false;
80 $('#weather_res_case').fadeIn(500,function(){$(this).removeClass('common_hide')})}}
81 }
82 var onEvent={
83 onEvent:function(){
84 var has_daluzai=onEvent.daluzai();
85 if(has_daluzai===true){
86 $('#weather_sub >input').click(function(){onEvent.searchWeather();})
87 Enter_Ctrl('weather_search',13,"onEvent.searchWeather()");}},
88 searchWeather:function(){
89 uisy.query('search');
90 var city=$('#weather_search >input').val();
91 city=$.trim(city);weather_.getWeather(city);},
92 daluzai:function(){
93 var has_author=$('#weather_author');
94 if(has_author.length===0){return false;}
95 else{has_author.click(function(){go_URL('blank','http://www.cnblogs.com/blue-lg/archive/2012/03/04/2379564.html');})
96 return true;}},
97 killError:function(){
98 function killErrors(){return true;}
99 window.onerror=killErrors;}
100 }
101
102 //頁面以某方式跳轉到某頁面
103 function go_URL(type,url){if(type=='blank'){window.open(url,'');}else{window.location=url;}}
104
105 //利用keycode=13使得回車與點擊查詢按鈕功能一致
106 function Enter_Ctrl(get_id,ent,fun){
107 if(typeof(get_id)=='undefined'||get_id==''){//若get_id對象非空,則綁定keypress事件!
108 var set_obj=$(document);}
109 else{var set_obj=$('#'+get_id);}
110
111 if(ent==13){
112 set_obj.keypress(function(e){if(e.which==13||e.which==10){eval(fun);}})}
113 else{set_obj.keypress(function(e){if(e.ctrlKey&&e.which==13||e.which==10){eval(fun);}})}
114
115 }
116 //
117 function def_value(get_id,msg){//輸入框的默認提示
118 var set_obj=$('#'+get_id).find('input');
119 if(set_obj.val()==""){
120 set_obj.val(msg);
121 set_obj.css('color','#949494');
122 }
123 set_obj.click(function(){
124 if($(this).val()==msg){
125 $(this).val('');
126 set_obj.css('color','');
127 }});
128 set_obj.bind("blur",function(){
129 if($(this).val()==''){
130 $(this).val(msg);
131 set_obj.css('color','#949494');
132 }});
133 }



注意點:

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]對象的值,發現結果如下所示:

該對象的s1/d1等值分別對應當前的天氣狀況,據此我們就可以輕鬆的使用html()進行賦值,以及圖片的對應選擇!


2.文檔使用了jquery.js,主要是利用了其中的fadein和fadeout顯示效果,讀者可以自行添加此js文件。


3.文件下載地址:

js天氣預報


有錯誤的地方還望各位園友指正。。。


轉載請註明:http://www.cnblogs.com/blue-lg/archive/2012/03/04/2379564.html

 



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章