一款专为高三学生设计的倒计时工具，帮助学生直观地感知距离高考的时间，提供励志语录和个性化设置，营造专注备考的氛围。
主要特性 · 技术实现 · 项目结构 · 功能详解 · 使用方法 · 浏览器兼容性 · 开发说明 · 核心模块说明 · 许可证 · 致谢
- 精准倒计时：显示距离高考的天、时、分、秒，可选择显示毫秒
- 智能时间逻辑：根据当前时间自动调整倒计时目标（考前/考试中/考后）
- 励志语录：集成一言 API，每 30 秒自动更换一条励志语录
- 个性化设置：主题模式、背景切换、特效开关，满足不同用户的审美需求
- 响应式设计：完美适配各种屏幕尺寸，无论手机还是电脑都能获得优质体验
- 视觉效果：通盈效果卡片效果营造现代感，下雪动效增添浪漫氛围
- 每日壁纸：支持 Bing 每日一图，每天都有新鲜的视觉体验
- 数据持久化：用户设置自动保存，下次打开依然保持个性化配置
- 智能设备适配：自动检测设备性能，低配设备自动禁用动画以保证流畅
- 全屏模式：支持一键全屏，沉浸式体验
- HTML5：构建页面结构和内容
- CSS3：实现现代化视觉效果和响应式布局
- JavaScript (ES6+)：处理业务逻辑和交互
- 本地存储：使用 localStorage 持久化用户设置
- 无外部依赖：完全原生实现，不依赖任何第三方库或框架
项目采用了现代 Web 设计趋势，注重用户体验和视觉美感：
- 玻璃拟态 (Glassmorphism)：通过 backdrop-filter 实现毛玻璃效果
- 通盈效果：利用 SVG 滤镜创造独特的液体扭曲质感
- CSS 动画：平滑的过渡和交互动画，提升使用体验
- 自适应主题：智能识别系统颜色模式，自动切换深色/浅色主题
- 响应式布局：灵活运用 Flexbox，适应不同屏幕尺寸
- 性能自适应：根据设备内存自动调整动画开关
高考倒计时/
├── .trae/ # Trae IDE 配置
├── styles/
│ ├── base.css # 基础变量和全局样式
│ ├── layout.css # 布局样式
│ ├── components.css # 组件样式（按钮、开关等）
│ ├── themes.css # 主题样式
│ ├── animations.css # 动画样式
│ ├── loading.css # 加载页面样式
│ ├── countdown.css # 倒计时卡片样式
│ ├── modal.css # 模态窗样式
│ └── notice.css # 通知提示样式
├── scripts/
│ ├── main.js # 主程序逻辑
│ ├── loading.js # 加载页面管理
│ ├── time.js # 倒计时核心逻辑
│ ├── inspire.js # 励志语录管理
│ ├── settings.js # 用户设置管理
│ ├── snow.js # 下雪动效
│ ├── device.js # 设备检测与性能适配
│ └── notice.js # 通知提示管理
├── logo.png # 项目图标
├── PRD.md # 产品需求文档
├── README.md # 项目说明文档
├── LICENSE # 开源许可证
└── index.html # 入口页面
根据当前时间与高考时间的对比，智能调整倒计时目标：
- 考试前 (6月7日前)：倒计时显示距离考试开始的时间
- 考试期间 (6月7日-9日)：倒计时显示距离考试结束的时间
- 考试后 (6月9日后)：自动切换到下一年高考的倒计时
用户可以设置个性化的时间和事件：
- 自定义事件名称（如"高考"、"中考"等）
- 自定义目标日期
- 自定义目标时间
点击倒计时卡片可切换显示模式：
- 倒计时模式：显示距离目标的时间
- 当前时间模式：显示当前日期和时间
- 跟随系统：根据系统设置自动切换深色/浅色模式
- 白天模式：始终使用浅色主题
- 夜间模式：始终使用深色主题
- 白色：适合深色背景
- 黑色：适合浅色背景
- 默认渐变：使用内置的渐变色背景
- 纯色背景：提供多种预设渐变色可选（蓝色、橙色、紫色、绿色）
- 每日一图：自动获取 Bing 每日壁纸
支持多种类型的励志语录：
- 动画、漫画、游戏、文学
- 诗词、网易云音乐热评、哲学、抖机灵
- 毫秒显示：高精度倒计时（10ms 更新一次）
- 下雪动效：浪漫的雪花飘落动画
- 通盈效果：独特的液体扭曲视觉效果
- 开启动画：全局动画开关（低配设备自动禁用）
使用 SVG 滤镜实现流体的扭曲效果，代码位于 index.html：
<filter id="liquid-filter" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence type="fractalNoise" baseFrequency="0.008 0.008" numOctaves="2" seed="92" result="noise" />
<feGaussianBlur in="noise" stdDeviation="2" result="blurred" />
<feDisplacementMap in="SourceGraphic" in2="blurred" scale="77" xChannelSelector="R" yChannelSelector="G" />
</filter>基于 Canvas 的粒子系统，代码位于 scripts/snow.js：
- 粒子数量根据屏幕宽度动态调整
- 模拟真实的雪花飘落轨迹
- 粒子透明度和大小随机变化
- 使用 requestAnimationFrame 实现流畅动画
代码位于 scripts/device.js：
- 检测设备内存（通过 Navigator.deviceMemory API）
- 内存低于 4GB 的设备自动禁用动画
- 确保低配设备也能流畅运行
- 克隆或下载项目到本地
- 直接用浏览器打开
index.html - 或使用本地服务器（如 Live Server、python -m http.server）
项目可直接部署到任何静态托管服务：
- GitHub Pages
- Vercel
- Netlify
- EdgeOne Page
- ......
在设置面板中可以个性化：
- 点击右上角设置按钮
- 选择"偏好"或"目标"标签
- 根据需要调整各项设置
- 设置会自动保存
| 浏览器 | 最低版本 |
|---|---|
| Chrome | 61+ |
| Firefox | 55+ |
| Safari | 11+ |
| Edge | 79+ |
- 部分 CSS 属性需要较新的浏览器版本
- 下雪动效在低性能设备上可能有轻微卡顿
- 通盈效果需要 SVG 滤镜支持
- 设备内存检测需要浏览器支持 Navigator.deviceMemory API
- 使用 IIFE 避免全局污染
- ES6+ 语法，Chrome 61+ 完全支持
- CSS 优先使用 Flexbox 布局
- HTML 结构语义化
- CSS 放在头部，JS 放在 body 底部
- 使用事件委托减少 DOM 操作
- 动画使用 CSS3 硬件加速
- 图片使用现代格式
如需添加新功能：
- 在
scripts/目录创建新的模块 - 使用 IIFE 模式封装
- 通过
GaoKao命名空间导出 - 在
main.js中初始化
App (scripts/main.js)
主应用程序类，协调所有模块：
- 初始化和协调各模块
- 绑定用户交互事件
- 管理设置保存和应用
- 处理 UI 更新
LoadingManager (scripts/loading.js)
负责加载页面的显示和隐藏，采用渐进式加载策略：
- 管理加载资源的状态
- 控制加载页面的淡出动画
- 确保所有资源加载完成后才显示主界面
Countdown (scripts/time.js)
倒计时的核心计算模块：
- 精确计算时间差
- 智能判断当前考试阶段
- 支持毫秒级高精度显示
- 提供回调函数更新 UI
SettingsManager (scripts/settings.js)
用户设置的管理器：
- 加载和保存设置到 localStorage
- 应用主题到页面
- 触发设置变更事件
QuoteManager (scripts/inspire.js)
励志语录的管理模块：
- 调用一言 API 获取语录
- 支持按类型筛选语录
- 自动轮换语录（每 30 秒）
- 本地备用语录库
SnowManager (scripts/snow.js)
下雪动效的粒子系统：
- 动态创建雪花粒子
- 模拟物理飘落效果
- 响应窗口大小变化
- 性能优化的动画循环
NoticeManager (scripts/notice.js)
通知提示的管理器：
- 显示临时通知气泡
- 自动消失或手动关闭
- 滑动收起动画效果
DeviceManager (scripts/device.js)
设备检测与性能适配：
- 检测设备内存
- 判断是否为低配设备
- 智能决定是否启用动画
LiquidManager (scripts/main.js)
通盈效果管理器：
- 动态追踪卡片位置
- 更新 SVG 裁剪区域
- 同步背景图像
本项目采用 MIT License 开源，欢迎贡献者参与项目开发。
祝所有考生金榜题名！