天气查看 

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>获取第三方天气数据</title>
  6     <style type="text/css">
  7         #div1{
  8             position:relative;
  9             left: 50%;
 10             background: lightGreen;
 11             width: 300px;
 12             height: 500px;
 13             overflow-y: scroll;
 14             overflow-x: hidden;
 15             margin-left: -150px;
 16             padding-bottom: 20px;
 17         }
 18         #div1 select{
 19             margin-left : 80px;
 20             margin-top : 10px;
 21             height: 30px;
 22         }
 23         #div1 input{
 24             height: 30px;
 25         }
 26         #div1 div{
 27             width: 300px;
 28             background: lightBlue;
 29             border-bottom: red solid 1px;
 30         }
 31         #div1 div ul li{
 32             list-style-type: none;  
 33             padding-left: 10px;
 34         }
 35 
 36 
 37     </style>
 38     <script src="jquery-1.11.2.js"></script>    
 39     <script src="template.js"></script>    
 40     <script type="text/javascript">
 41     function abc(data){
 42         var d = data.weather;
 43         var info = document.getElementById('info');
 44         info.innerHTML = '';
 45         
 46         for(var i=0;i<d.length;i++){
 47             var date = d[i].date;
 48             var day = d[i].info.day;
 49             var night = d[i].info.night;
 50             var tag = '';
 51             tag += '<span>日期：'+date+'</sapn><ul>';
 52             tag += '<li>白天天气：'+day[1]+'</li>'
 53             tag += '<li>白天温度：'+day[2]+'</li>'
 54             tag += '<li>白天风向：'+day[3]+'</li>'
 55             tag += '<li>白天风速：'+day[4]+'</li>'
 56             tag += '</ul>';
 57 
 58             tag += '<ul>';
 59             tag += '<li>夜间天气：'+night[1]+'</li>'
 60             tag += '<li>夜间温度：'+night[2]+'</li>'
 61             tag += '<li>夜间风向：'+night[3]+'</li>'
 62             tag += '<li>夜间风速：'+night[4]+'</li>'
 63             tag += '</ul>';
 64             var div = document.createElement('div');
 65             div.innerHTML = tag;
 66             info.appendChild(div);
 67             
 68         }
 69     }
 70 
 71     window.onload = function(){
 72         var city = document.getElementById('city');
 73         city.onchange = function(){
 74             document.getElementById('info').innerHTML = '';
 75         }
 76         var btn = document.getElementById('btn');
 77         
 78         btn.onclick = function(){
 79             var cityCode = city.value;
 80             var url = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=abc&code='+city.value;
 81             var script = document.createElement('script');
 82             script.src = url;
 83             document.body.appendChild(script);
 84         }
 85 
 86     }
 87     </script>
 88 </head>
 89 <body>
 90 <div id="div1">
 91     <select id="city">
 92         <option value="101010100">北京</option>
 93         <option value="101020100">上海</option>
 94         <option value="101280101">广州</option>
 95         <option value="101280601">深圳</option>
 96     </select>
 97     <input type="button" value="查看天气" id="btn">
 98     <div id="info"></div>
 99 </div>
100 </body>
101 </html>

 

posted @ 2018-03-01 08:39  前端极客  阅读(253)  评论(0)  编辑  收藏  举报