简单的天气预报

本文介绍了一个简单的天气预报网页应用,该应用使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值