怎么在HTML中插入动态天气信息_HTML天气API对接与数据展示

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

怎么在HTML中插入动态天气信息_HTML天气API对接与数据展示

2025-10-25

浏览次数：次

返回列表

答案：通过调用OpenWeatherMap API并使用J*aScript获取和解析数据，将动态天气信息展示在HTML页面上。具体步骤包括注册获取API密钥、利用fetch()请求天气数据、解析JSON响应并更新DOM元素内容，同时可结合CSS美化显示样式，并可通过输入框、图标、定时刷新和地理位置API扩展功能，最终实现交互性强的实时天气展示，注意API密钥安全应通过后端代理保护。

怎么在html中插入动态天气信息_html天气api对接与数据展示

要在HTML中插入动态天气信息，关键在于调用天气API并把返回的数据展示在页面上。这个过程包括获取API密钥、发送请求、解析数据和更新DOM。下面一步步说明如何实现。

选择合适的天气API

市面上有多个免费且稳定的天气API可供使用，比如：

OpenWeatherMap：提供实时天气、预报、地理编码等功能，注册后可获得免费API密钥。
WeatherAPI：功能全面，支持JSON/XML格式，也有免费套餐。
AccuWeather：数据精准，但免费额度较严格。

以 OpenWeatherMap 为例，访问其官网注册账号，获取API密钥（如：your_api_key）。

在HTML中引入J*aScript请求天气数据

HTML本身不能发起网络请求，需要借助J*aScript。你可以通过fetch()方法从API获取天气信息。

立即学习“前端免费学习笔记（深入）”；

Docky AI

多合一AI浏览器助手，解答问题、绘制图片、阅读文档、强化搜索结果、辅助创作

100 查看详情 Docky AI

示例代码：

<div id="weather">正在加载天气...</div>

<script>
const apiKey = 'your_api_key';  // 替换为你的实际密钥
const city = 'Beijing';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=zh_cn`;

fetch(url)
  .then(response => {
    if (!response.ok) throw new Error('城市未找到或网络错误');
    return response.json();
  })
  .then(data => {
    const temp = Math.round(data.main.temp);
    const desc = data.weather[0].description;
    const name = data.name;
    document.getElementById('weather').innerHTML =
      `${name}：${temp}°C，${desc}`;
  })
  .catch(error => {
    document.getElementById('weather').textContent = '获取天气失败：' + error.message;
  });
</script>

说明：

units=metric 表示温度单位为摄氏度。
lang=zh_cn 返回中文描述。
通过document.getElementById将数据写入页面元素。

美化天气显示样式

可以加入CSS让天气信息更美观：

<style>
#weather {
  font-family: Arial, sans-serif;
  padding: 16px;
  background: #4fc3f7;
  color: white;
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
  max-width: 300px;
  margin: 20px auto;
}
</style>