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 1