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

网页上显示实时天气早就不是什么新鲜功能了，企业官网、个人主页、后台管理系统里都很常见。这类需求的核心其实就三步：找一个能返回天气数据的接口，用JavaScript把数据请求回来，再把数据填进HTML里。本文会从接口选择、代码实现、细节优化三个层面把整套流程讲透，看完你就能直接把代码搬到自己的项目里用。

一、选择天气API并完成申请配置

做天气模块的第一件事是确定数据来源。目前主流的免费天气API有OpenWeatherMap、和风天气、心知天气等。OpenWeatherMap是国际服务，全球城市覆盖好，免费额度大约是每天1000次调用，够个人项目用了；和风天气是国内服务，对国内城市的数据更细，还提供生活指数、空气质量等扩展数据，免费版每天也有上千次的配额。

选好平台后需要注册账号并创建一个API Key，这个Key就是你的调用凭证，一般是一串32位的十六进制字符串。以OpenWeatherMap为例，注册后在控制台的API keys页面就能看到。要特别注意的是，新申请的Key通常要等十几分钟到两小时才会生效，刚拿到手就调用会收到401错误，这不是代码问题，耐心等等即可。

调用方式很简单，把Key拼在URL的查询参数里即可。OpenWeatherMap的当前天气接口格式如下：

https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=你的API密钥&units=metric&lang=zh_cn

其中q是城市名，units=metric表示用摄氏度，lang=zh_cn让返回的天气描述显示中文。浏览器直接打开这个地址就能看到返回的JSON数据，建议先手动访问一次确认数据结构再写代码。

二、用fetch请求天气数据并渲染到页面

先搭好HTML结构。一个典型的天气卡片包含城市名、温度、天气描述、图标和更新时间几个区域，给每个区域安排好id，方便后续用JavaScript填充内容：

<div class="weather-card">
  <h3 id="cityName">加载中...</h3>
  <p class="temp"><span id="temperature">--</span><em>℃</em></p>
  <p id="weatherDesc">正在获取天气信息</p>
  <img id="weatherIcon" src="" alt="天气图标"/>
  <p class="update-time">更新时间：<span id="updateTime">--</span></p>
</div>

接着写JavaScript逻辑。现代浏览器都原生支持fetch，不需要引入任何库。用async/await写异步代码可读性最好，配合try...catch捕获异常，把加载状态、成功渲染、失败提示三种情况都处理到：

const API_KEY = '你的API密钥';

async function loadWeather(city) {
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${API_KEY}&units=metric&lang=zh_cn`;
  document.getElementById('weatherDesc').textContent = '正在获取天气信息...';
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('请求失败，状态码：' + response.status);
    }
    const data = await response.json();
    // 填充城市名和温度
    document.getElementById('cityName').textContent = data.name;
    document.getElementById('temperature').textContent = Math.round(data.main.temp);
    // 填充天气描述和图标
    document.getElementById('weatherDesc').textContent = data.weather[0].description;
    document.getElementById('weatherIcon').src =
      `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
    // 填充更新时间
    const now = new Date();
    document.getElementById('updateTime').textContent =
      now.toLocaleTimeString('zh-CN');
  } catch (error) {
    document.getElementById('weatherDesc').textContent = '天气数据获取失败，请稍后重试';
    console.error('天气请求出错：', error);
  }
}

loadWeather('Beijing');

这段代码有几个细节值得展开。第一，城市名用encodeURIComponent编码，这样传入中文城市名时不会因为URL乱码而报错。第二，温度用Math.round取整，界面上显示24℃比24.33℃更清爽。第三，OpenWeatherMap返回的图标字段是个编码，比如01d代表晴天，直接拼接图片URL就能拿到官方图标，不用自己画。

三、进阶优化：自动定位、定时刷新与错误兜底

基础版跑通之后，还可以往三个方向优化。首先是自动定位，浏览器提供了原生的地理位置接口，拿到经纬度后调用API的坐标查询版本，用户打开页面就能看到自己所在城市的天气：

function loadWeatherByLocation() {
  if (!navigator.geolocation) {
    loadWeather('Beijing'); // 不支持定位就回退到默认城市
    return;
  }
  navigator.geolocation.getCurrentPosition(
    async (position) => {
      const { latitude, longitude } = position.coords;
      const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric&lang=zh_cn`;
      const response = await fetch(url);
      const data = await response.json();
      renderWeather(data);
    },
    () => loadWeather('Beijing') // 用户拒绝授权时的回退方案
  );
}

其次是定时刷新。天气数据不需要实时到秒级，一般半小时更新一次就够了。用setInterval设置刷新间隔即可，但要注意页面切到后台时定时器仍在消耗API配额，更稳妥的做法是监听visibilitychange事件，页面重新可见时再判断是否需要刷新：

const REFRESH_INTERVAL = 30 * 60 * 1000; // 30分钟
let lastUpdate = 0;

document.addEventListener('visibilitychange', () => {
  if (!document.hidden && Date.now() - lastUpdate > REFRESH_INTERVAL) {
    loadWeather('Beijing');
  }
});

最后是安全与兜底问题。API Key直接写在HTML源码里，任何访问者都能看到并被盗用，生产环境建议把请求放到自己的后端转发，前端只请求自己的接口。跨域方面，主流天气API都开启了CORS支持，浏览器端直接fetch没问题；如果遇到不支持跨域的小众接口，同样走后端代理解决。另外记得给网络异常的用户留一条路，比如失败时显示缓存的上一次数据，或者至少给出友好提示，而不是让页面停留在“加载中”。

整体来看，在HTML里接入动态天气并不难，重点在于把数据获取、渲染、异常处理三条链路都想清楚。把上面的代码组合起来，再配一点CSS美化卡片样式，一个实用的天气模块就完成了，后续想扩展七日预报、生活指数，也不过是换个接口、多渲染几个字段的事。

HTML天气API动态天气信息JavaScript异步请求修改时间：2026-09-12 19:34:32