气象仪表盘开发指南

构建一个基于HTML5/CSS3/JS和OpenWeatherMap API的综合气象仪表盘,包含实时天气、五日预报、智能定位、用户设置和天文数据模块,采用响应式设计和可视化图表呈现数据。
构建一个基于HTML5、CSS3、JavaScript和OpenWeatherMap API的综合气象仪表盘。需创建具有视觉吸引力的界面,具体要求如下:

核心功能要求:
1. 实时天气模块
- 动态显示当前天气状况(温度、天气描述)
- 根据天气类型/昼夜时间自动切换对应图标和背景
- 集成气象数据可视化元素(风速/风向、湿度、气压、紫外线指数、空气质量等)

2. 五日预报系统
- 主界面显示5天简明预报
- 支持逐日展开查看每小时详细数据
- 包含降水概率等进阶指标

3. 智能定位服务
- 实现地理坐标和城市名称双模式搜索
- 集成自动补全和历史记录功能
- 内置GPS地理定位自动检测

4. 用户自定义设置
- 温度单位切换(摄氏度/华氏度)
- 时间显示格式选择
- 严重天气警报优先高亮显示

5. 天文数据模块
- 日出/日落时间显示
- 配套可视化时间指示器

技术要求:
1. 采用CSS Grid构建完全响应式布局
2. 适配所有设备尺寸的显示密度
3. 确保API调用错误处理机制
4. 实现数据加载状态指示器

界面规范:
- 所有气象图标使用标准天气icon库
- 色彩方案需符合气象数据特征
- 移动端优先的交互设计
- 关键数据采用可视化图表呈现

注:需处理OpenWeatherMap API的请求频率限制,并实现本地缓存策略以优化性能。

使用说明

  • 点击"复制提示词"按钮复制完整内容
  • 粘贴到 ChatGPT、Claude 或其他 AI 对话工具中
  • 根据实际需求调整提示词中的具体参数
  • 可以多次迭代优化以获得更好的结果