屏时钟 / 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 等平台。
我正在撰写一系列的产品复盘,如果你也是开发者,可以关注我,以了解:
- 前端时间校准的实践
- Svelte 的国际化基础与优化
- Svelte 应用 PWA 和 SSR 的那些坑
