当前位置： 首页 > web >正文

纯前端实现基于位置的天气和动态背景图片

web 2025/7/4 23:48:39

如何为博客首页实现基于位置的天气和动态背景图片

在这里插入图片描述

引言

我为我的博客主页添加了根据用户所在位置显示当地天气、日出日落时间，并加载一张与天气和时间段匹配的高质量背景图片，可以显著提升用户体验。想象晴天时展示阳光普照的田野，雨天时呈现湿润的城市街景，这样的个性化设计既美观又贴心。

我的博客主页:http://inksnowhl.cn/

本文将详细介绍如何实现这一功能，重点放在核心实现逻辑上，而不局限于特定框架，让你可以轻松将其应用到自己的项目中。

技术栈

实现这一功能需要以下技术：

  • JavaScript：用于处理 API 请求和逻辑计算，适用于任何前端环境。
  • Open-Meteo API：免费天气 API，提供天气代码、日出和日落时间。
  • Pexels API：图片 API，用于获取与天气和时间段匹配的高质量背景图片。
  • ipapi.co：免费 IP 定位服务，用于获取用户经纬度。
  • LocalStorage：浏览器缓存机制，用于存储背景图片，减少 API 请求。

实现步骤

1. 获取用户位置

要根据用户位置获取天气，首先需要用户的经纬度。ipapi.co 提供了一个简单 API，通过 GET 请求 https://ipapi.co/json/ 获取位置信息：

async function getLocation() {try {const response = await fetch("https://ipapi.co/json/");const data = await response.json();return { latitude: data.latitude, longitude: data.longitude };} catch (error) {console.error("获取位置失败:", error);return { latitude: 39.9042, longitude: 116.4074 }; // 默认位置（如北京）}
}

说明：如果请求失败，代码会回退到默认位置（这里以北京为例），确保功能可用。

2. 获取天气数据

使用 Open-Meteo API 获取天气信息，包括天气代码、日出和日落时间。以下是核心实现：

async function getWeather(latitude, longitude) {const params = {latitude,longitude,daily: ["sunrise", "sunset"],current: "weather_code",timezone: "auto",};const url = "https://api.open-meteo.com/v1/forecast";const responses = await fetchWeatherApi(url, params);const response = responses[0];const current = response.current();const daily = response.daily();return {weatherCode: current.variables(0).value(),sunrise: new Date(Number(daily.variables(0).valuesInt64(0)) * 1000).toLocaleString(),sunset: new Date(Number(daily.variables(1).valuesInt64(0)) * 1000).toLocaleString(),};
}

说明：

  • 使用 fetchWeatherApi（需引入 Open-Meteo SDK）发送请求。
  • timezone: "auto" 自动适配用户时区。对于咱们中国，可以设置为北京的时区，设置为 timezone:"Asia/Shanghai"
  • 返回的天气代码（weatherCode）用于确定天气类型，日出日落时间用于时间段计算。
    • 天气代码参考：https://open-meteo.com/en/docs 的最下面

3. 映射天气代码

Open-Meteo 的天气代码是数字（例如，0 表示晴天，61 表示雨）。需要将其映射为描述性文本和英文名称，用于显示和图片搜索：

const weatherMap = {0: { zh: "晴天", en: "sunny" },1: { zh: "多云", en: "cloudy" },61: { zh: "雨", en: "rain" },95: { zh: "雷暴", en: "thunderstorm" },// 更多映射...
};function getWeatherDescription(code) {return weatherMap[code] || { zh: "未知", en: "unknown" };
}

说明：这种映射便于将天气代码转换为中文描述（用于显示）和英文名称（用于图片搜索）。

4. 获取动态背景图片

使用 Pexels API 根据天气和时间段搜索图片（例如，sunny morning）。为了优化性能，添加了 LocalStorage 缓存，并检查 API 配额：

async function getBackgroundImage(weather, timeOfDay) {const query = `${weather}+${timeOfDay}`;const cacheKey = "bgImg";const cache = localStorage.getItem(cacheKey);if (cache) {const cacheData = JSON.parse(cache);if (Date.now() < cacheData.expires && cacheData.query === query) {return cacheData.url;}}const response = await fetch(`https://api.pexels.com/v1/search?query=${query}&per_page=1`,{ headers: { Authorization: "您的 API 密钥" } });// 检查配额const limit = response.headers.get("X-Ratelimit-Limit");const remaining = response.headers.get("X-Ratelimit-Remaining");const reset = new Date(Number(response.headers.get("X-Ratelimit-Reset")) * 1000);console.log(`总配额: ${limit}, 剩余: ${remaining}, 重置时间: ${reset}`);if (remaining === "0") {console.warn("Pexels API 配额已用尽，将于", reset, "重置");return "默认图片 URL"; // 提供备用图片}const data = await response.json();const url = data.photos[0]?.src.original || "默认图片 URL";localStorage.setItem(cacheKey, JSON.stringify({expires: Date.now() + 1000 * 60 * 60, // 缓存1小时url,query,}));return url;
}

配额检查说明：

  • X-Ratelimit-Limit：每月总请求限额。
  • X-Ratelimit-Remaining：剩余请求数。
  • X-Ratelimit-Reset：配额重置的 UNIX 时间戳（秒）。
  • 如果 remaining 为 0，代码会记录警告并使用默认图片，确保功能不中断。

5. 计算时间段

根据日出日落时间，将一天分为早晨、中午、傍晚和晚上，用于选择合适的背景图片：

function getTimeOfDay(sunrise, sunset) {const now = Date.now();const sunriseTime = new Date(sunrise).getTime();const sunsetTime = new Date(sunset).getTime();const morningEnd = sunriseTime + 4 * 3600 * 1000; // 日出后4小时const eveningStart = sunsetTime - 1 * 3600 * 1000; // 日落前1小时if (now < sunriseTime) return { zh: "晚上", en: "night" };if (now < morningEnd) return { zh: "早晨", en: "morning" };if (now < eveningStart) return { zh: "中午", en: "noon" };return { zh: "傍晚", en: "evening" };
}

说明：时间段基于日出日落时间动态计算，确保图片与实际时间匹配。

6. 整合功能

以下是将上述逻辑整合的主函数：

async function initDynamicBackground() {const { latitude, longitude } = await getLocation();const weatherData = await getWeather(latitude, longitude);const weatherDesc = getWeatherDescription(weatherData.weatherCode);const timeOfDay = getTimeOfDay(weatherData.sunrise, weatherData.sunset);const bgUrl = await getBackgroundImage(weatherDesc.en, timeOfDay.en);// 应用背景图片（例如，设置到 DOM）document.body.style.backgroundImage = `url(${bgUrl})`;// 显示天气信息（例如，更新 DOM）document.getElementById("weather").textContent = weatherDesc.zh;document.getElementById("sunrise").textContent = weatherData.sunrise;document.getElementById("sunset").textContent = weatherData.sunset;
}

说明：

  • 函数按顺序获取位置、天气、时间段和背景图片。
  • 结果用于更新页面背景和显示天气信息。
  • 代码使用原生 JavaScript 操作 DOM，适用于任何环境。

完整代码示例

以下是核心功能的完整实现：

const weatherMap = {0: { zh: "晴天", en: "sunny" },1: { zh: "多云", en: "cloudy" },61: { zh: "雨", en: "rain" },95: { zh: "雷暴", en: "thunderstorm" },
};async function getLocation() {try {const response = await fetch("https://ipapi.co/json/");const data = await response.json();return { latitude: data.latitude, longitude: data.longitude };} catch (error) {console.error("获取位置失败:", error);return { latitude: 39.9042, longitude: 116.4074 };}
}async function getWeather(latitude, longitude) {const params = {latitude,longitude,daily: ["sunrise", "sunset"],current: "weather_code",timezone: "auto",};const url = "https://api.open-meteo.com/v1/forecast";const responses = await fetchWeatherApi(url, params);const response = responses[0];const current = response.current();const daily = response.daily();return {weatherCode: current.variables(0).value(),sunrise: new Date(Number(daily.variables(0).valuesInt64(0)) * 1000).toLocaleString(),sunset: new Date(Number(daily.variables(1).valuesInt64(0)) * 1000).toLocaleString(),};
}function getWeatherDescription(code) {return weatherMap[code] || { zh: "未知", en: "unknown" };
}function getTimeOfDay(sunrise, sunset) {const now = Date.now();const sunriseTime = new Date(sunrise).getTime();const sunsetTime = new Date(sunset).getTime();const morningEnd = sunriseTime + 4 * 3600 * 1000;const eveningStart = sunsetTime - 1 * 3600 * 1000;if (now < sunriseTime) return { zh: "晚上", en: "night" };if (now < morningEnd) return { zh: "早晨", en: "morning" };if (now < eveningStart) return { zh: "中午", en: "noon" };return { zh: "傍晚", en: "evening" };
}async function getBackgroundImage(weather, timeOfDay) {const query = `${weather}+${timeOfDay}`;const cacheKey = "bgImg";const cache = localStorage.getItem(cacheKey);if (cache) {const cacheData = JSON.parse(cache);if (Date.now() < cacheData.expires && cacheData.query === query) {return cacheData.url;}}const response = await fetch(`https://api.pexels.com/v1/search?query=${query}&per_page=1`,{ headers: { Authorization: "您的 API 密钥" } });const limit = response.headers.get("X-Ratelimit-Limit");const remaining = response.headers.get("X-Ratelimit-Remaining");const reset = new Date(Number(response.headers.get("X-Ratelimit-Reset")) * 1000);console.log(`总配额: ${limit}, 剩余: ${remaining}, 重置时间: ${reset}`);if (remaining === "0") {console.warn("Pexels API 配额已用尽，将于", reset, "重置");return "默认图片 URL";}const data = await response.json();const url = data.photos[0]?.src.original || "默认图片 URL";localStorage.setItem(cacheKey, JSON.stringify({expires: Date.now() + 1000 * 60 * 60,url,query,}));return url;
}async function initDynamicBackground() {const { latitude, longitude } = await getLocation();const weatherData = await getWeather(latitude, longitude);const weatherDesc = getWeatherDescription(weatherData.weatherCode);const timeOfDay = getTimeOfDay(weatherData.sunrise, weatherData.sunset);const bgUrl = await getBackgroundImage(weatherDesc.en, timeOfDay.en);document.body.style.backgroundImage = `url(${bgUrl})`;document.getElementById("weather").textContent = weatherDesc.zh;document.getElementById("sunrise").textContent = weatherData.sunrise;document.getElementById("sunset").textContent = weatherData.sunset;
}// 执行初始化
initDynamicBackground();

注意事项

  1. Pexels API 配额：

    • 每月配额通过 X-Ratelimit-Limit 查看（通常为 20,000 次）。
    • 剩余请求数通过 X-Ratelimit-Remaining 获取。
    • 重置时间通过 X-Ratelimit-Reset（UNIX 时间戳）确定。
    • 若配额用尽，建议使用默认图片或暂停请求直到重置。

  2. API 密钥安全：不要将 Pexels API 密钥硬编码在前端代码中。建议通过环境变量或后端代理加载。

  3. 缓存优化：背景图片缓存为1小时，避免频繁请求，同时保持内容新鲜,也能减少API请求次数，防止耗尽配额

  4. 错误处理：

    • 位置获取失败时使用默认经纬度。
    • 图片请求失败或无结果时使用默认图片。
    • 检查 API 配额，防止超限。

  5. 框架无关：代码使用原生 JavaScript，可轻松适配 Vue、React 或其他框架。只需将数据绑定到框架的状态管理（如 Vue 的 ref 或 React 的 useState）。

结语

通过以上步骤，你可以为博客首页实现一个动态功能：根据用户位置显示天气、日出日落时间，并加载匹配的背景图片。核心逻辑使用纯 JavaScript 实现，灵活适用于各种项目。Pexels API 的配额检查确保了请求的可靠性，而缓存机制优化了性能。快试试吧，为你的博客增添一份个性化的魅力！

http://www.xdnf.cn/news/6586.html

相关文章：

  • 行为型模式：责任链模式
  • 代码随想录 算法训练 Day2：数组
  • 第七节第三部分：从JDK8开始接口新增的方法、接口的多继承、注意事项
  • 一.android Studio开发系统应用——导入TvSettings源码
  • Medical | 药品追溯码【待续】
  • 2025-5-15Vue3快速上手
  • 散热片为何“失效”？热阻路径建模的常见误区解析
  • 并发控制：确保多线程环境下的数据一致性与完整性
  • SymPy | 使用SymPy求解多元非线性方程组
  • 3DVR制作的工具或平台
  • windows ffmpeg msvc x64编译
  • keil uniFlash烧录出现八字节对齐错误
  • 并发编程（二）
  • ProfibusDP主站转ModbusRTU/TCP与横河AXG电磁流量计通讯案例
  • 语音识别——声纹识别
  • bfs搜索加标记连通区域id实现时间优化（空间换时间）
  • C++文件操作--1 文本文件操作
  • MYSQL之基本查询(CURD)
  • 基于javaweb的JSP+Servlet家政服务系统设计与实现(源码+文档+部署讲解）
  • c++,windows,多线程编程详细介绍
  • 机器视觉对位手机中框点胶的应用
  • Oracle统计信息收集时的锁持有阶段
  • 全面指南：Xinference大模型推理框架的部署与使用
  • 平替BioLegend品牌-FITC 标记 CD11c 抗体 [N418]，精准识别小鼠树突细胞
  • [Harmony]大文件持久化
  • Spring-messaging-MessageHandler接口实现类ServiceActivatingHandler
  • Pangle出海指南：如何实现ROI最大化？
  • Spring Boot多数据源配置的陷阱与终极解决方案
  • 在 Vue 中使用 Three.js 渲染 GLB 格式模型
  • antd 主题色定制