本文详解如何通过调用天气 api 获取实时温度数据，并基于温度值自动切换网页背景颜色，涵盖异步请求、数据解析、条件判断与 dom 操作全流程。
在 Web 开发中，根据动态数据（如实时气温）改变页面视觉效果是一种常见且实用的交互方式。实现“依据温度改变背景色”的核心在于三步：安全获取远程数据 → 正确提取数值 → 精准执行样式更新。下面将为你提供一套完整、可运行的解决方案。
✅ 正确获取并解析温度数据
你最初遇到 undefined 错误的根本原因在于：试图直接访问未定义的 DOM 元素或未加载的 API 响应对象。例如 document.querySelector(data.main.temp) 实际上是在查找一个标签名为 285.15 的元素（假设 temp 是数字），这显然不存在；而 temp.innerText 中的 temp 变量也从未被声明或赋值。
正确做法是使用 fetch() 发起异步 HTTP 请求，并配合 async/await 确保数据就绪后再处理：
async function colorChange() {
try {
// 使用免费、无需 API Key 的 Open-Meteo 接口（已含单位与地理坐标）
const response = await fetch(
"https://api.open-meteo.com/v1/forecast?latitude=39.7392&longitude=-104.9847&daily=temperature_2m_max&timezone=GMT&forecast_days=1&unit=celsius"
);
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json();
const tempColor = data.daily.temperature_2m_max[0]; // 当日最高气温（摄氏度）
console.log("当前温度:", tempColor);
// ✅ 条件判断并设置背景色
if (tempColor <= 10) {
document.body.style.backgroundColor = "lightgrey";
} else if (tempColor >= 11 && tempColor < 20) {
document.body.style.backgroundColor = "lightblue";
} else {
document.body.style.backgroundColor = "lightcoral";
}
// 可选：将温度显示在页面上便于调试
document.querySelector("div#temp-display")?.textContent = `?️ ${tempColor}°C`;
} catch (err) {
console.error("获取温度失败:", err);
document.body.style.backgroundColor = "#f5f5f5"; // 降级默认色
}
}
// 页面加载完成后执行
document.addEventListener("DOMContentLoaded", colorChange);? HTML 与 CSS 配套示例
确保你的 HTML 中包含一个用于展示温度的容器（便于验证逻辑是否生效）：
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>温度响应式背景</title>
<style>
body { margin: 0; font-family: -apple-system, sans-serif; }
#temp-display {
position: fixed;
top: 20px;
right: 20px;
background: rgba(0,0,0,0.7);
color: white;
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
z-index: 100;
}
</style>
</head>
<body>
<div id="temp-display">加载中...</div>
<script src="script.js"></script>
</body>
</html>⚠️ 注意事项与最佳实践
- 避免硬编码坐标：生产环境建议根据用户地理位置（navigator.geolocation）动态获取经纬度；
- 错误处理不可省略：网络异常、API 限流、跨域限制都可能导致 fetch 失败，务必包裹 try/catch；
- 单位统一：OpenWeatherMap 需加 &units=metric，Open-Meteo 默认返回摄氏，注意文档差异；
- 性能与体验：若频繁调用，建议添加防抖或缓存机制；首次加载时可设默认背景色提升感知速度；
- 语义化与可维护性：将颜色映射规则抽离为配置对象，便于后续扩展（如新增「炎热」红色区间）：
const TEMPERATURE_THEMES = [
{ range: [-Infinity, 10], color: "lightgrey" },
{ range: [11, 19], color: "lightblue" },
{ range: [20, Infinity], color: "lightcoral" }
];
const theme = TEMPERATURE_THEMES.find(t =>
tempColor >= t.range[0] && tempColor <= t.range[1]
);
if (theme) document.body.style.backgroundColor = theme.color;掌握这一模式后，你不仅能实现温度驱动的视觉反馈，还可轻松迁移至其他动态场景——如根据用户活跃度变色、按加载进度渐变、依表单验证状态高亮等。关键永远在于：数据可信、逻辑清晰、体验平滑。
