屏时钟 / Full Clock:放弃 time.is,用 Svelte 5 写了一个极致纯净的全屏时钟,解决秒数焦虑

屏时钟 / Full Clock:放弃 time.is,用 Svelte 5 写了一个极致纯净的全屏时钟,解决秒数焦虑
  • 关闭秒数显示总觉得精度太低,对时间无掌控感;
  • 数字显示秒数总觉得变化太快,分秒流逝而焦虑;

因此,灵光一现,我想到了:

背景长条驱动的秒数显示

秒数不直接用数字展现,而是作为一个进度条,高度为整个界面高,随着时间的推移,从最左边推到最右边,又在新一分钟到来时归零。

如此配置,你想精确对时,定睛一看便知;想专心致志,画面静谧如止。全屏时钟追求的,就是这种润物无声的时光流逝。

可配置项一览

  • 12/24小时制
  • 秒数显示多模式(关闭/数字显示/背景长条)
  • 标题配置(可显示日期/关闭/自定义信息,适合考试科目时间展示)
  • 主题配置(颜色、字体)
  • 中/英双语支持
  • 屏幕常亮:若你的浏览器支持 Wake Lock API,实现类似 Keep Screen On 网站的效果。
  • 简易时间同步:即使你的电脑系统时间有几秒误差,Full Clock 也能通过前端同步技术,确保显示的时间精确无误。
  • PWA 支持:你可以像安装原生 App 一样将其添加到桌面,离线可用,沉浸感更强。

技术复盘预览

本项目技术栈为Svelte 5 + SvelteKit 2 + Vite写成,构建产物为纯前端页面,可部署至 Vercel/Netlify 等平台。

我正在撰写一系列的产品复盘,如果你也是开发者,可以关注我,以了解:

  1. 前端时间校准的实践
  2. Svelte 的国际化基础与优化
  3. Svelte 应用 PWA 和 SSR 的那些坑