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

天气预报云服务器部署实战

ai 2025/9/8 6:35:58

引言

一款采用现代前端技术构建的美观、实用的天气预报单页应用，提供直观的天气信息展示和流畅的用户体验。

一 项目概述

本项目是一个纯前端实现的天气预报单页应用，结合了精美的UI设计和流畅的动画效果，为用户提供实时天气信息和未来天气预报。应用支持响应式设计，可在各种设备上完美展示。

二 功能特性

- **实时天气信息**：显示当前温度、体感温度、湿度、风速、气压等详细气象数据

- **未来天气预报**：提供未来几天的天气趋势预测

- **动态天气图标**：根据天气状况展示相应的动画效果（太阳旋转、云朵浮动、雨滴下落等）

- **数据可视化**：使用Chart.js展示温度变化趋势图表

- **响应式设计**：完美适配手机、平板和桌面设备

- **优雅的UI**：采用蓝色渐变背景和半透明卡片设计，营造清新、专业的视觉效果

- **平滑动画**：页面元素添加入场动画和平滑过渡效果

三 技术栈

- **HTML5**：构建语义化的页面结构

- **Tailwind CSS v3**：快速实现响应式布局和现代化UI设计

- **JavaScript (ES6+)**：处理交互逻辑和数据展示

- **Font Awesome**：提供丰富的天气图标

- **Chart.js**：用于绘制温度变化趋势图表

四 快速开始

indel.html 文件启动

五 核心代码展示

下面是应用中最核心的功能实现代码，展示了天气数据处理、UI更新、动态效果和数据可视化的关键部分：

5.1. 天气数据获取与处理

function getWeatherData(city) {showLoading();// 模拟API调用延迟setTimeout(() => {try {// 在实际应用中，这里应该是真实的API调用// 这里使用模拟数据进行演示useMockData(city);} catch (error) {console.error('获取天气数据失败:', error);showToast('获取天气数据失败，请稍后重试');useMockData(city); // 即使API失败，也使用模拟数据} finally {hideLoading();}}, 1500);
}

5.2天气 UI 更新系统

// 更新天气UI
function updateWeatherUI(data) {// 更新城市名称document.getElementById('city-name').textContent = data.city;// 更新当前时间document.getElementById('current-time').textContent = getCurrentTime();// 获取当前天气数据const currentWeather = data.data[0];// 更新当前天气信息document.getElementById('current-temp').textContent = currentWeather.temperature;document.getElementById('current-weather').textContent = currentWeather.weather;document.getElementById('current-wind').textContent = currentWeather.wind;document.getElementById('air-quality').textContent = currentWeather.air_quality;// 更新天气图标const weatherIconContainer = document.getElementById('weather-icon');weatherIconContainer.innerHTML = getWeatherIcon(currentWeather.weather);// 更新预报卡片updateForecastCards(data.data);// 更新温度图表updateTemperatureChart(data.data);// 滚动到当前天气document.getElementById('current').scrollIntoView({ behavior: 'smooth' });// 添加动画效果weatherContent.classList.remove('animate-fade-in');void weatherContent.offsetWidth; // 触发重绘weatherContent.classList.add('animate-fade-in');
}// 更新预报卡片
function updateForecastCards(forecastData) {const forecastContainer = document.querySelector('#forecast .grid');forecastContainer.innerHTML = '';forecastData.forEach(day => {const card = document.createElement('div');card.className = 'bg-white rounded-xl shadow-md p-4 card-hover';// 获取天气图标const weatherIcon = getWeatherIcon(day.weather);card.innerHTML = `<div class="text-center"><p class="font-medium text-gray-700">${day.date}</p>${weatherIcon}<p class="text-gray-600">${day.weather}</p><p class="font-bold mt-2">${day.temperature}</p><p class="text-sm text-gray-500 mt-1">${day.wind}</p></div>`;forecastContainer.appendChild(card);});
}

5.3. 动态天气图标系统

// 获取天气图标
function getWeatherIcon(weather) {let iconClass = '';let animationClass = '';if (weather.includes('晴')) {iconClass = 'fa-sun';animationClass = 'animate-sun';} else if (weather.includes('云')) {iconClass = 'fa-cloud';animationClass = 'animate-cloud';} else if (weather.includes('雨')) {iconClass = 'fa-cloud-rain';animationClass = 'animate-rain';} else if (weather.includes('雪')) {iconClass = 'fa-snowflake';animationClass = 'animate-snow';} else if (weather.includes('雾')) {iconClass = 'fa-smog';animationClass = 'animate-fog';} else if (weather.includes('雷')) {iconClass = 'fa-bolt';animationClass = 'animate-thunder';} else {iconClass = 'fa-cloud-sun';animationClass = '';}return `<i class="fa ${iconClass} text-primary text-4xl ${animationClass}"></i>`;
}

5.4 数据可视化实现

// 更新温度图表
function updateTemperatureChart(forecastData) {const ctx = document.getElementById('temperature-chart').getContext('2d');// 销毁已存在的图表if (window.temperatureChart) {window.temperatureChart.destroy();}const dates = forecastData.map(day => day.date);const minTemps = forecastData.map(day => {return parseInt(day.temperature.split('-')[0].replace('℃', ''));});const maxTemps = forecastData.map(day => {return parseInt(day.temperature.split('-')[1].replace('℃', ''));});// 创建新图表window.temperatureChart = new Chart(ctx, {type: 'line',data: {labels: dates,datasets: [{label: '最高温度',data: maxTemps,borderColor: '#F97316',backgroundColor: 'rgba(249, 115, 22, 0.1)',borderWidth: 2,tension: 0.3,fill: false,pointBackgroundColor: '#F97316',pointRadius: 4},{label: '最低温度',data: minTemps,borderColor: '#3B82F6',backgroundColor: 'rgba(59, 130, 246, 0.1)',borderWidth: 2,tension: 0.3,fill: false,pointBackgroundColor: '#3B82F6',pointRadius: 4}]},options: {responsive: true,maintainAspectRatio: false,// 更多配置选项...}});
}

5.5 页面交互也用户体验化

// 移动端菜单切换
mobileMenuButton.addEventListener('click', () => {mobileMenu.classList.toggle('hidden');
});// 城市搜索
searchButton.addEventListener('click', () => {const city = citySearch.value.trim();if (city) {getWeatherData(city);} else {showToast('请输入城市名称');}
});// 热门城市点击
const cityTags = document.querySelectorAll('.city-tag');
cityTags.forEach(tag => {tag.addEventListener('click', () => {const city = tag.textContent;citySearch.value = city;getWeatherData(city);});
});// 显示提示信息
function showToast(message) {// 创建toast元素const toast = document.createElement('div');toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-dark text-white px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 opacity-0';toast.textContent = message;document.body.appendChild(toast);// 显示toastsetTimeout(() => {toast.classList.remove('opacity-0');toast.classList.add('opacity-100');}, 10);// 3秒后隐藏setTimeout(() => {toast.classList.remove('opacity-100');toast.classList.add('opacity-0');setTimeout(() => {document.body.removeChild(toast);}, 300);}, 3000);
}

5.6 动态效果实现

/* 太阳动画 */
@keyframes sun {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}/* 云朵动画 */
@keyframes cloud {0%, 100% {transform: translateY(0);}50% {transform: translateY(-5px);}
}/* 雨滴动画 */
@keyframes fall {0% {transform: translateY(-20px);opacity: 0;}10% {opacity: 1;}90% {opacity: 1;}100% {transform: translateY(40px);opacity: 0;}
}/* 雪花动画 */
@keyframes snow {0% {transform: translateY(-20px) rotate(0deg);opacity: 0;}50% {opacity: 1;}100% {transform: translateY(20px) rotate(360deg);opacity: 0;}
}/* 雾动画 */
@keyframes fog {0%, 100% {opacity: 0.6;}50% {opacity: 0.3;}
}

六 设计亮点

6.1 视觉设计

- **渐变背景**：使用蓝色系渐变作为页面背景，营造天空的感觉

- **半透明卡片**：采用半透明的白色卡片展示天气信息，创造层次感

- **阴影效果**：为卡片添加柔和的阴影，增强立体感

- **圆角设计**：统一使用圆角元素，营造亲和、现代的视觉感受

- **文本层次**：通过不同的字体大小、粗细和颜色，建立清晰的文本信息层次结构

6.2 动态效果

- **太阳动画**：缓慢旋转效果，模拟太阳东升西落

- **云朵动画**：上下浮动效果，仿佛在天空中轻轻飘动

- **雨滴动画**：自然下落效果，营造下雨的真实感

- **雪花动画**：轻盈飘落效果，模拟雪花从天空降落

- **雾动画**：淡入淡出效果，表现雾气的朦胧感

- **雷电动画**：闪烁效果，呈现雷暴天气的特点

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

相关文章：

  • 在Java AI项目中实现Function Call功能
  • 计算机毕设大数据方向：基于Spark+Hadoop的餐饮外卖平台数据分析系统【源码+文档+调试】
  • 通过Idea 阿里插件快速部署java jar包
  • 实用向：Linux Shell 脚本实现 CPU / 内存 / 硬盘 + IO / 网络多指标告警（支持 163/QQ/139 邮箱）
  • python调用mysql
  • PDF文件基础-计算机字体
  • 【Luogu_P8118】 「RdOI R3.5」Mystery【Slope Trick】【DP】
  • 深度学习基础概念回顾（Pytorch架构）
  • 【Java实战㉗】Java日志框架实战：Logback与Log4j2的深度探索
  • 大型Go项目中搭建CI/CD流水线
  • 竞价代运营：百度竞价账户托管优化
  • VeeValidate v4 终极指南：精通 Vue 3 组合式 API 表单验证
  • Web Worker 从原理到实战 —— 把耗时工作搬到后台线程，避免页面卡顿
  • 计算机视觉（九）：图像轮廓
  • 破局功能割裂、成本高昂、协同低效，遨游天通卫星电话实现一机多能
  • Adobe Illustrator(Ai) 2022矢量设计软件的安装教程与下载地址
  • 【Python自动化】 21.3 Pandas Series 核心数据结构完全指南
  • 如何使显示器在笔记本盖上盖子时还能正常运转
  • windows找不到gpedit.msc（本地组策略编辑器）
  • Docker容器安全最佳实践：镜像扫描、权限控制与逃逸防范
  • Pie Menu Editor V1.18.7.exe 怎么安装？详细安装教程（附安装包）​
  • [linux仓库]性能加速的隐形引擎：深度解析Linux文件IO中的缓冲区奥秘
  • Java并发锁相关
  • LeetCode - 202. 快乐数
  • 深度学习——数据增强（Data Augmentation）
  • HTML HTML基础(2)
  • 数控机床中，进行前瞻速度规划时，根据几何约束限制计算的拐角过渡速度
  • HTML基础（决定页面结构）
  • MQTT 与 Java 框架集成：Spring Boot 实战（一）
  • 【GEOS-Chem伴随模型第二期】GEOS-Chem Adjoint 安装与配置