天气明信片 | Weather Postcard

一个美观、响应式的天气展示网页应用，提供实时天气信息和精美的卡片式界面。

特性

✨ 现代设计

• 精美的卡片式布局
• 流畅的动画和过渡效果
• 根据天气自动调整主题颜色

📱 完美响应式

• 自适应各种屏幕尺寸
• 优化的手机端体验
• 支持所有现代浏览器

🌍 功能完整

• 按城市名称搜索天气
• 按坐标查询天气 (纬度,经度)
• 获取当前位置天气
• 显示详细天气数据
  • 温度、体感温度
  • 湿度、风速、气压
  • 能见度、日出日落

📊 丰富信息

• 实时天气状态
• 多种天气图标
• 鼓舞人心的天气短语
• 时间和日期显示

文件结构

├── index.html      # 主HTML文件
├── styles.css      # 样式表（响应式设计）
├── script.js       # JavaScript逻辑
└── README.md       # 说明文档

使用方式

1. 直接使用（演示模式）

打开 index.html 文件，无需任何配置。演示模式包含以下城市：

• 北京 (Beijing)
• 上海 (Shanghai)
• 深圳 (Shenzhen)
• 杭州 (Hangzhou)

输入上述城市名称查看效果。

2. 配置真实API（可选）

要使用真实天气数据，需要OpenWeatherMap API密钥：

步骤1：获取API密钥

1. 访问 https://openweathermap.org/api
2. 注册一个免费账号
3. 生成API密钥 (API Key)
4. 复制密钥

步骤2：配置应用

打开 script.js 文件，找到第2行：

const API_KEY = 'demo'; // User can replace with their own OpenWeatherMap API key

替换为：

const API_KEY = 'YOUR_API_KEY_HERE';

示例：

const API_KEY = 'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6';

功能说明

搜索功能

按城市名称搜索：

• 输入城市名称（中英文都支持）
• 点击"搜索"按钮或按 Enter 键

按坐标搜索：

• 输入格式：纬度,经度
• 示例：39.9,116.4 (北京)、31.2,121.5 (上海)

获取当前位置：

• 点击📍按钮
• 授予浏览器地理定位权限
• 自动获取当前位置天气

天气显示

显示的主要信息：

• 温度 - 当前温度
• 体感温度 - 考虑风寒效应的体感温度
• 天气描述 - 晴天、多云、下雨等
• 湿度 - 空气湿度百分比
• 风速 - 风的速度
• 气压 - 大气压强
• 能见度 - 视物距离
• 日出/日落 - 太阳升起和落下的时间

主题变换

根据天气类型自动调整卡片和背景颜色：

• ☀️ 晴天 - 蓝紫色主题
• ☁️ 多云 - 灰色主题
• 🌧️ 下雨 - 深蓝色主题
• ❄️ 下雪 - 浅蓝色主题
• ⛈️ 雷暴 - 深色主题

响应式设计

应用完全响应式，包括以下断点优化：

• 桌面 (> 480px) - 全功能界面
• 平板 (< 480px) - 压缩布局
• 手机 (< 360px) - 单列布局

技术栈

• HTML5 - 语义化标记
• CSS3 - 现代样式和动画
  • Flexbox 布局
  • Grid 布局
  • Gradient 背景
  • 媒体查询响应式设计
• Vanilla JavaScript - 无框架依赖
  • Fetch API 获取数据
  • Geolocation API 获取位置
  • Date/Time API 时间处理

浏览器兼容性

✅ Chrome / Edge (最新版本) ✅ Firefox (最新版本) ✅ Safari (最新版本) ✅ 移动浏览器 (iOS Safari, Chrome Mobile)

API参考

OpenWeatherMap API

本应用使用 OpenWeatherMap Current Weather API：

• 文档：https://openweathermap.org/current
• 免费计划支持：
  • 无限API调用
  • 每秒60个请求限制
  • 历史数据保留5天

数据字段

{
  "name": "City Name",
  "main": {
    "temp": 20,           // 温度 (°C)
    "feels_like": 18,     // 体感温度
    "humidity": 60,       // 湿度 (%)
    "pressure": 1013      // 气压 (hPa)
  },
  "weather": [{
    "main": "Clear",      // 天气主要描述
    "description": "晴天", // 天气详细描述
    "icon": "01d"         // 天气图标代码
  }],
  "wind": {
    "speed": 5            // 风速 (m/s)
  },
  "visibility": 10000,    // 能见度 (m)
  "clouds": {
    "all": 10             // 云量 (%)
  },
  "sys": {
    "sunrise": 1555555200, // 日出时间 (Unix时间戳)
    "sunset": 1555601200   // 日落时间 (Unix时间戳)
  }
}

演示数据

内置演示数据无需API密钥：

{
  '北京': { /* 晴天数据 */ },
  '上海': { /* 多云数据 */ },
  '深圳': { /* 下雨数据 */ },
  '杭州': { /* 下雪数据 */ }
}

故障排除

Q: 显示"城市未找到"

A: 确认城市名称拼写正确，或尝试用英文名称

Q: 天气数据无法加载

A:

1. 检查网络连接
2. 确认API密钥配置正确
3. 检查API请求是否超过速率限制
4. 查看浏览器控制台的错误信息

Q: 地理定位不工作

A:

1. 确保浏览器有地理定位权限
2. 在HTTPS环境下使用（某些浏览器要求）
3. 检查系统地理定位设置

Q: 样式显示异常

A:

1. 清除浏览器缓存
2. 检查CSS文件是否正确加载
3. 尝试在隐私模式下打开

许可证

MIT License - 自由使用、修改和分发

贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

更新日志

v1.0.0 (2024-04-15)

• ✨ 初始版本
• 📱 完整的响应式设计
• 🌍 演示数据和真实API支持
• ⛈️ 根据天气自动主题变换
• 📍 地理定位支持

---

祝您使用愉快！如有问题，欢迎反馈。