简单的天气预报

最新推荐文章于 2023-11-29 17:56:44 发布

原创最新推荐文章于 2023-11-29 17:56:44 发布 · 534 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

本文介绍了一个简单的天气预报网页应用，该应用使用HTML、CSS和JavaScript实现，并通过Ajax调用和风天气API获取指定城市的天气预报数据。用户可以在输入框中输入城市名称，应用将展示未来几天的日期、最高温度、最低温度及白天和夜间的天气状况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>