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>