气象仪表盘开发指南

构建一个基于HTML5/CSS3/JS和OpenWeatherMap API的综合气象仪表盘,包含实时天气、五日预报、智能定位、用户设置和天文数据模块,采用响应式设计和可视化图表呈现数据。

技术游戏2026-02-23
提示词内容

构建一个基于HTML5、CSS3、JavaScript和OpenWeatherMap API的综合气象仪表盘。需创建具有视觉吸引力的界面,具体要求如下: 核心功能要求:

  1. 实时天气模块
  • 动态显示当前天气状况(温度、天气描述)
  • 根据天气类型/昼夜时间自动切换对应图标和背景
  • 集成气象数据可视化元素(风速/风向、湿度、气压、紫外线指数、空气质量等)
  1. 五日预报系统
  • 主界面显示5天简明预报
  • 支持逐日展开查看每小时详细数据
  • 包含降水概率等进阶指标
  1. 智能定位服务
  • 实现地理坐标和城市名称双模式搜索
  • 集成自动补全和历史记录功能
  • 内置GPS地理定位自动检测
  1. 用户自定义设置
  • 温度单位切换(摄氏度/华氏度)
  • 时间显示格式选择
  • 严重天气警报优先高亮显示
  1. 天文数据模块
  • 日出/日落时间显示
  • 配套可视化时间指示器 技术要求:
  1. 采用CSS Grid构建完全响应式布局
  2. 适配所有设备尺寸的显示密度
  3. 确保API调用错误处理机制
  4. 实现数据加载状态指示器 界面规范:
  • 所有气象图标使用标准天气icon库
  • 色彩方案需符合气象数据特征
  • 移动端优先的交互设计
  • 关键数据采用可视化图表呈现 注:需处理OpenWeatherMap API的请求频率限制,并实现本地缓存策略以优化性能。 复制提示词