沉浸式时钟(Immersive Clock) 是一款基于 React + TypeScript + Vite 构建的、专为天津二中自习模式设计的轻量化桌面 / 网页时钟应用。
支持时钟、倒计时、秒表与自习模式,内置天气监测、自习噪音分析、多频道励志语录、多目标倒计时轮播等实用功能。
通过 PWA 技术,支持离线使用、自动更新及桌面端安装体验。
适用场景:校园自习、专注学习、番茄钟、演示看板、桌面时钟等。
我们提供多种使用方式,满足不同场景的需求。
通过 PWA (Progressive Web App) 技术,您可以像原生应用一样安装本时钟,享受离线使用、桌面图标启动和自动更新的体验,且无需下载庞大的安装包。
安装步骤:
- 使用 Chrome、Edge 等浏览器访问演示站。
- 点击浏览器地址栏右侧的 "安装 Immersive Clock" 图标(通常是一个带有加号的小显示器图标)。
- 确认安装后,应用将以独立窗口运行,并自动在桌面/开始菜单生成图标。
如果您不想安装任何内容,可以直接访问网页版。
推荐使用 Chrome、Edge 或 Safari 的最新版本以获得最佳性能和动画体验。
如果您需要更传统的桌面软件体验(支持 Windows/macOS/Linux),可以下载 Electron 打包版本。
- 多模式切换:时钟 / 倒计时 / 秒表 / 自习模式一键切换。
- 智能 HUD:沉浸式交互,点击或按键显示控制栏,无操作约 8 秒自动隐藏。
- 高级倒计时:
- 支持单次、高考/考研目标日倒计时。
- 多事件轮播:支持添加多个重要日期(如四级、期末考)并按设定间隔自动轮播展示。
- 个性化定制:独立配置每个倒计时项的背景色、透明度与字体样式。
- 环境感知:
- 实时天气:集成天气 API,提供分钟级降水预警与气象灾害预警。
- 噪音监测:基于 Web Audio API 的高帧率实时采样,内置评分引擎,支持基线校准、最大阈值设置及包含走势图的详细自习报告。
- 专注氛围:
- 励志语录:支持多频道源(如一言),可配置不同频道的权重与自动刷新频率。
- 组件开关:可自由隐藏噪音、语录、大字时间等组件,定制专属学习界面。
- 背景定制:支持纯色、径向渐变及上传本地图片作为背景。
- 个性化字体:支持上传自定义字体文件 (.ttf/.woff2),打造舒适的阅读体验。
- 课表导入:支持 Excel 课表文件导入,一键同步学习计划。
- PWA 支持:离线缓存、桌面安装、自动更新。
- 新手友好:提供友好的首次使用引导,帮助用户快速熟悉核心功能。
- 资源优化:静态资源(图片/字体/音频)分级缓存策略,秒级加载。
- 无障碍设计:全键盘导航支持(Space/Enter 唤出 HUD),优化 ARIA 属性。
详细说明请见:
如果你想贡献代码、修复问题或在本地进行二次开发,请阅读贡献指南。








