简单的天气预报

最新推荐文章于 2020-10-02 10:57:09 发布

Devil_xkl

最新推荐文章于 2020-10-02 10:57:09 发布

阅读量436

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/Devil_lzh/article/details/79392723

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气预报</title>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
</style>
</head>
<body>
<div id="box">
请输入你要查询的城市的天气情况:<input type="text" value="广州" /> // input中的value 可以是任何地区
<div class="box">

</div>
<ul></ul>
</div>
</body>
<script src="js/jquery.min-1.12.4.js"></script>
<script>
var box = document.querySelector('.box');
var ul = document.querySelector('ul');
var input= document.querySelector('input');
getNow();
input.onchange = function(){
console.log(input)

getNow()
}
function getNow(){
$.ajax({
dataType:'json',
type:"get",
url:"https://free-api.heweather.com/s6/weather/forecast?location="+input.value+"&key=9fd107ed0b9d42e39fc2ea636bb66395",
data:{},
success:function(rs){
var data = rs.HeWeather6[0].basic;
var html = '';
html += '<span>'+ data.location +
'</span><span>' +data.admin_area+
'</span><span>' +data.cnty+'</span>'
box.innerHTML = html;

var dataBox = rs.HeWeather6[0].daily_forecast;
var htmlBox = '';
for(var i = 0;i<dataBox.length;i++){
htmlBox += '<li>'+dataBox[i].date +
'</li><li>最高温度：' +dataBox[i].tmp_max+
'</li><li>最低温度：' +dataBox[i].tmp_min+
"</li><li>白天：<img src='img/" +dataBox[i].cond_code_d+ ".png'/>"+
"</li><li>夜间：<img src='img/" +dataBox[i].cond_code_n+ ".png'/>"+'</li>';
}
ul.innerHTML = htmlBox;
},

});
}
</script>
</html>

Devil_xkl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的天气预报

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;天气预报&lt;/title&gt; &lt;style&gt; *{margin: 0;padding: 0;} li{list-style: none;} &lt;/styl
复制链接

扫一扫