在HTML中获取天气信息，通常需要借助JavaScript和第三方API，这里以调用心知天气API为例，介绍如何在HTML中获取天气信息。
（图片来源网络，侵删）
1、注册心知天气API账号
你需要访问心知天气官网（https://www.seniverse.com/）注册一个账号，并创建一个应用，创建完成后，你将获得一个AppID，这是调用API的关键。
2、编写HTML页面
创建一个HTML文件，weather.html，在这个文件中，我们需要引入一个JavaScript库，用于发送HTTP请求，这里我们使用jQuery库，因为它简化了JavaScript的编写，在<head>标签内添加以下代码：
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
接下来，我们在<body>标签内添加一个<div>元素，用于显示天气信息：
<div id="weather"></div>
3、编写JavaScript代码
在<script>标签内编写JavaScript代码，用于发送请求并处理响应，我们需要定义一个函数，用于发送请求：
function getWeather(city) {
const appid = \'你的AppID\'; // 替换为你的心知天气AppID
const url = https://api.seniverse.com/v3/weather/now.json?key=${appid}&location=${city}&language=zhHans&unit=c&format=json;
$.getJSON(url, function(data) {
// 处理响应数据
displayWeather(data);
});
}
接下来，我们需要编写一个函数，用于显示天气信息：
function displayWeather(data) {
const weather = data.results[0].now;
const temperature = weather.temperature;
const text = 当前城市：${weather.location.name}，温度：${temperature}℃，天气：${weather.text};
$(\'#weather\').text(text);
}
4、调用getWeather函数
我们需要调用getWeather函数，传入你想要查询的城市名称，我们可以在页面加载完成后，自动获取北京的天气信息：
$(document).ready(function() {
getWeather(\'北京\');
});
将以上代码整合到weather.html文件中，你就可以看到一个显示北京天气信息的页面了，你可以根据需要修改getWeather函数的参数，查询其他城市的天气信息。
注意：由于跨域请求的限制，直接在本地文件系统中打开weather.html文件可能无法正常显示天气信息，你需要将文件部署到一个Web服务器上，或者使用支持跨域请求的浏览器插件（如CORS Unblock）。
本文来自投稿，不代表科技代码立场，如若转载，请注明出处https://www.cwhello.com/440288.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
