气象仪表盘开发指南
构建一个基于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 对话工具中
- 根据实际需求调整提示词中的具体参数
- 可以多次迭代优化以获得更好的结果
