您的位置：首页 > 编程语言

简易天气预报代码

2016-12-29 11:15 176 查看
 <!DOCTYPE html>
 <html
lang="en">
 <head>
 <meta
charset="UTF-8">
 <title>Title</title>
 <style>
 #show{display:block;width:800px;height:200px;background:orange;border:1px solid #333;}
 </style>
 </head>
 <body>
 <input
type="text"
id="city">
 <button
id="checkWeather">查询天气</button><br />
 <span
id="show">展示天气预报</span>
  
 <script>
 var cw = document.getElementById("checkWeather");
 cw.onclick = function() {
 var http;
 if(window.XMLHttpRequest) {
 http = new XMLHttpRequest();
 } else {
 http = new ActiveXObject("Microsoft.XMLHTTP");
 }
  
 http.onreadystatechange = function(){
 if(http.readyState == 4 && http.status == 200) {
 // show.textContent = http.responseText;
 var json = JSON.parse(http.responseText);
 console.log(json);
 show.textContent = "城市:" + json.data.city;
 show.textContent += "===温馨提示:" + json.data.ganmao;
 show.textContent += "===今天天气:" + json.data.forecast[0].type;
 show.textContent += ",最低温度:" + json.data.forecast[0].low;
 show.textContent += ",最高温度:" + json.data.forecast[0].high;
 show.textContent += ",风力:" + json.data.forecast[0].fengli;
 show.textContent += ",风向:" + json.data.forecast[0].fengxiang;
 }
 }
  
 var cityName = city.value;
  
 http.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=" + cityName,true);
 http.send();
 }
 </script>
 </body>
 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航