翻页时钟
实时数字翻页时钟，支持全屏、12/24 小时制和秒数显示。
正在同步时间
AM
--
--
小时
--
--
分钟
--
--
秒
什么是翻页时钟？
翻页时钟是一种以翻牌动画展示时间的数字时钟，灵感源自经典的机械翻页钟。这种时钟最早出现在20世纪中叶，通过物理翻动的卡片显示时间，因其独特的视觉美感和怀旧感而广受欢迎。
本工具完美复刻了翻页时钟的经典效果，每次数字变化都伴随着逼真的翻页动画。您可以在浏览器中直接使用，无需下载安装，支持全屏显示、12/24小时制切换、秒数显示开关等功能。
适用场景：桌面时钟、办公室装饰、直播/录播背景、演示文稿计时、番茄工作法计时、大屏幕展示等。所有时间计算均在本地完成，保护您的隐私。
本工具完美复刻了翻页时钟的经典效果，每次数字变化都伴随着逼真的翻页动画。您可以在浏览器中直接使用，无需下载安装，支持全屏显示、12/24小时制切换、秒数显示开关等功能。
适用场景：桌面时钟、办公室装饰、直播/录播背景、演示文稿计时、番茄工作法计时、大屏幕展示等。所有时间计算均在本地完成，保护您的隐私。
使用方法
使用方法
- 时钟自动显示当前时间，实时刷新
- 点击「12H/24H」按钮切换时间格式
- 点击「显示秒/隐藏秒」按钮切换秒数显示
- 点击「全屏」按钮进入全屏模式
- 设置会自动保存，下次访问时自动恢复
使用技巧
- 在投影仪、墙面显示屏或闲置平板上使用全屏模式，方便在房间任意位置都能看清时间。
- 若会议、课堂或活动期间需要时钟持续显示，请关闭系统休眠或屏幕变暗功能。
- 跨地区共享日程时建议使用 24 小时制；仅在需要精确计时时显示秒数。
使用场景
在第二块屏幕上显示易读的大号时钟用带翻页动画的卡片显示本地时间、本地化日期文字，并可选择全屏展示，适合桌面、工作室、教室、工作坊或直播背景。页面仅通过 JavaScript Date API 读取本地系统时钟，使用 CSS3 transform 实现翻页动画，不会调用远程时间服务器，也不需要登录或任何云账号即可持续运行。
在实用的显示模式之间切换根据使用场景（精确计时、环境装饰或演示屏幕）开关秒数显示并选择 12 小时制或 24 小时制。隐藏秒数后卡片每分钟翻动一次，节奏更平缓，适合环境装饰；显示秒数时，分卡和时卡仍在每分钟整点同步翻动，远处也能轻松看清。
无需配置闹钟即可获得清晰的视觉计时页面是显示时钟，不是计时器或日程工具。需要看得见时间时用它；需要提醒、会话或计时功能时，请使用倒计时或番茄钟工具。保持系统时钟准确，因为显示跟随浏览器的本地时间。
录制和演讲时显示秒数，装饰时隐藏打开秒数行能为录制和现场演讲提供更清晰的节拍感；关闭后在办公室墙面、大堂或等候室等场景下显示更平静，避免滴答感造成干扰。翻页效果使用 CSS3 3D transform 的 perspective 值渲染，卡片采用等宽数字槽位，较宽的「2」或较窄的「1」不会引起布局偏移和每秒一次的 1 像素抖动。
配合单独的倒计时工具管理会话页面是显示器而非计时器，因此在会话、演讲或会议需要可视化的结束标记时，请搭配专用的番茄钟或倒计时应用使用。两个页面读取同一个系统时钟，时间在窗口间保持一致。全屏按钮使用浏览器的 requestFullscreen API 将页面推送到投影仪、自助终端或闲置平板上，不显示地址栏，足以充当会议室墙钟，也免去了原生自助展示应用的额外配置。
技术原理
每张数字卡片被分成上下两半，上半部分显示当前值，下半部分显示下一个值，还有一个绝对定位的第三层围绕 X 轴从 0deg 旋转到 -180deg。父容器设置 perspective: 600px，使旋转呈现为 3D 深度效果而非垂直压扁，翻转层的 backface-visibility: hidden 防止镜像背面透出。当设置了 will-change: transform 时，浏览器会将该层提升为独立的合成器表面，使翻转在 GPU 上运行，而不是每帧重绘文本。
时间本身来自 Date.now()，返回自 Unix 纪元以来的毫秒数，但简单的 setInterval(fn, 1000) 会产生漂移，因为定时器以尽力调度的方式触发且偏移会累积。该工具改为通过计算 1000 - (Date.now() % 1000) 来调度下一个 tick，使边界落在实际的整秒上，并使用 requestAnimationFrame 驱动翻转动画，这样当标签页失去焦点或显示器休眠时动画会自动暂停。Page Visibility API (document.visibilityState) 在 visibilitychange 事件时重新同步显示的数字，避免用户离开几分钟后返回时显示过时的值。
显示格式通过 Intl.DateTimeFormat 的 hourCycle 选项（'h23' 表示 24 小时制，'h12' 表示 12 小时制带 AM/PM）读取浏览器语言环境。夏令时转换是隐式处理的，因为 getHours() 等 Date 方法已返回包含偏移变化的本地时间，因此时钟在春季从 02:00 跳到 03:00，在秋季显示两次 01:00，无需额外逻辑。
时间本身来自 Date.now()，返回自 Unix 纪元以来的毫秒数，但简单的 setInterval(fn, 1000) 会产生漂移，因为定时器以尽力调度的方式触发且偏移会累积。该工具改为通过计算 1000 - (Date.now() % 1000) 来调度下一个 tick，使边界落在实际的整秒上，并使用 requestAnimationFrame 驱动翻转动画，这样当标签页失去焦点或显示器休眠时动画会自动暂停。Page Visibility API (document.visibilityState) 在 visibilitychange 事件时重新同步显示的数字，避免用户离开几分钟后返回时显示过时的值。
显示格式通过 Intl.DateTimeFormat 的 hourCycle 选项（'h23' 表示 24 小时制，'h12' 表示 12 小时制带 AM/PM）读取浏览器语言环境。夏令时转换是隐式处理的，因为 getHours() 等 Date 方法已返回包含偏移变化的本地时间，因此时钟在春季从 02:00 跳到 03:00，在秋季显示两次 01:00，无需额外逻辑。
- 3D 翻转：在绝对定位层上使用 CSS transform: rotateX(-180deg)，父容器设置 perspective: 600px，backface-visibility: hidden 隐藏镜像背面
- GPU 合成：will-change: transform 将翻转元素提升为独立图层，使过渡通过合成完成而非重绘
- 无漂移计时：setTimeout 延迟计算为 1000 - (Date.now() % 1000)，使每个 tick 落在实际的整秒边界上，而非累积定时器偏移
- 动画时序：requestAnimationFrame 驱动 0deg 到 -180deg 的过渡，浏览器在后台标签页中会自动节流
- 后台恢复：Page Visibility API 监听 visibilitychange 事件并重新读取 Date.now()，使标签页重新获得焦点时数字跳转到正确值
- 语言环境和小时制：Intl.DateTimeFormat 配合 hourCycle 'h23' 或 'h12' 根据用户系统语言环境选择 24 小时制或 12 小时制 AM/PM 显示
- 全屏控制：Element.requestFullscreen() 和 document.exitFullscreen() 驱动壁挂显示模式，Esc 为标准退出键
示例
桌面常驻使用
调整浏览器窗口大小，将其放在桌面一角，作为长期可见的时钟。大屏展示
连接投影仪或大屏，按 F11 进入全屏，在会议室或活动现场展示。直播背景
在 OBS 中添加浏览器源，将翻页时钟 URL 作为直播背景。常见问题
时钟使用哪个时区？
你设备的本地时区，由操作系统设置。如需显示其他时区，请使用专门的世界时钟工具。时钟跟随系统时间，VPN 或时区伪装并不会改变它的显示。
可以在 12 小时制和 24 小时制之间切换吗？
可以。在设置里切换。12 小时制带 AM/PM；24 小时制显示 00 到 23，无 AM/PM。你可以按个人喜好选一种；部分版本会默认跟随操作系统语言区域。
为什么秒针有时一次跳过不止一秒？
这是后台标签页节流。当你切走时，浏览器会降低更新频率；切回时，时钟会通过跳秒来追赶。保持标签页处于前台才能获得平滑动画。如果即便保持前台也跳秒，说明 CPU 占用过高——检查一下还跑着什么程序。
翻页动画会影响性能吗？
CSS transform 动画由 GPU 加速，在现代设备上很轻量。在较旧的笔记本或手机上，每秒可能会有轻微卡顿。如果你更喜欢静态时钟面，可以在设置里关闭翻页动画。
我可以全屏运行整夜吗？
可以——它就是为做桌面或床头时钟而设计的。现代操作系统会自动调暗或休眠屏幕，需要手动设置“永不休眠”或使用系统的防休眠工具。笔记本请连接电源，电池模式下的休眠会暂停标签页。
运行几小时后还能保持准确吗？
可以。时钟由系统时间驱动，联网设备会通过 NTP 校时。在现代操作系统上，运行 24 小时的偏差通常不到 1 秒。
有任何数据会被上传吗？
没有。时钟只读取设备时间，不会记录或传输任何信息。