html头部怎么加入天气
时间: 2024-02-23 18:48:04 浏览: 16
要在HTML头部添加天气信息,你需要使用一个天气API来获取天气数据,然后将数据插入到HTML页面中。
以下是一个简单的示例,使用OpenWeatherMap API获取天气数据并将其插入到HTML页面中:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天气</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=北京&appid=你的API密钥", function(data) {
var temp = Math.round(data.main.temp - 273.15);
var weather = data.weather[0].description;
var icon = "https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var html = "<img src='" + icon + "'><p>" + temp + "°C, " + weather + "</p>";
$("#weather").html(html);
});
});
</script>
</head>
<body>
<div id="weather"></div>
</body>
</html>
```
在上面的示例中,我们使用了jQuery库来发起API请求并处理返回的JSON数据。请注意,你需要替换API密钥和城市名称以获取自己所需的天气数据。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <%@page isELIgnored="false" %> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>信息管理系统静态模板,网站后台静态模板 - 我爱模板网 www.5imoban.net</title> <script language="JavaScript" src="js/jquery.js"></script> <script type="text/javascript"></script> </head> <body> 位置: 首页
${admin.USERNAME},早上好,欢迎使用CPI查询系统
首页
数据可视化
数据管理
文件获取
账号设置 </body> </html> 为什么这个页面显示乱码
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)