翻頁時鐘
即時數位翻頁時鐘，支援全螢幕、12/24 小時制和秒數顯示。
正在同步時間
AM
--
--
小時
--
--
分鐘
--
--
秒
什麼是翻頁時鐘？
翻頁時鐘是一種以翻牌動畫展示時間的數位時鐘，靈感源自經典的機械翻頁鐘。這種時鐘最早出現在20世紀中葉，透過物理翻動的卡片顯示時間，因其獨特的視覺美感和懷舊感而廣受歡迎。
本工具完美復刻了翻頁時鐘的經典效果，每次數字變化都伴隨著逼真的翻頁動畫。您可以在瀏覽器中直接使用，無需下載安裝，支援全螢幕顯示、12/24小時制切換、秒數顯示開關等功能。
適用場景：桌面時鐘、辦公室裝飾、直播/錄播背景、演示文稿計時、番茄工作法計時、大螢幕展示等。所有時間計算均在本地完成，保護您的隱私。
本工具完美復刻了翻頁時鐘的經典效果，每次數字變化都伴隨著逼真的翻頁動畫。您可以在瀏覽器中直接使用，無需下載安裝，支援全螢幕顯示、12/24小時制切換、秒數顯示開關等功能。
適用場景：桌面時鐘、辦公室裝飾、直播/錄播背景、演示文稿計時、番茄工作法計時、大螢幕展示等。所有時間計算均在本地完成，保護您的隱私。
如何使用
如何使用
- 時鐘會自動顯示目前時間並即時更新
- 點選「12H/24H」按鈕切換時間格式
- 點選「顯示秒數/不顯示秒數」按鈕切換秒數顯示
- 點選「全螢幕」按鈕進入全螢幕模式
- 設定會自動儲存，下次開啟時自動套用
使用提示
- 需要從房間另一端清楚看見時間時，可在投影機、牆面螢幕或閒置的平板上使用全螢幕模式。
- 若時鐘需在會議、上課或活動期間持續顯示，請關閉系統休眠或螢幕自動調暗功能。
- 跨時區共用的行程請使用 24 小時制；需要精確計時時再顯示秒數。
使用場景
在第二螢幕上顯示清晰易讀的時鐘以動態翻頁卡片顯示本地時間，配有在地化的日期文字和可選的全螢幕模式，適合桌面、工作室、教室、工作坊或直播背景。由於頁面只透過 JavaScript Date API 讀取本機系統時鐘，並使用 CSS3 transform 製作翻頁動畫，它不會呼叫遠端時間伺服器，也不需要登入或任何雲端帳號就能持續運作。
切換實用的顯示模式根據時鐘的用途——精確計時、氛圍展示或簡報螢幕——開啟或關閉秒數，並選擇 12 小時制或 24 小時制。隱藏秒數時卡片每分鐘翻動一次，產生較平靜的節奏，適合氛圍展示；顯示秒數時，分鐘和小時卡片仍會在每分鐘的開頭同步翻動，因此在遠距離仍容易閱讀。
不設定鬧鐘也能清楚掌握時間此頁面是展示用時鐘，不是計時器或排程器。需要清楚看見時間時使用它；需要提醒、工作段落或經過時間追蹤時，請使用倒數計時或番茄鐘工具。保持系統時鐘準確，因為顯示跟隨的是瀏覽器的本地時間。
工作室計時顯示秒數，氛圍場景隱藏秒數開啟秒數列能為錄製和直播演講提供更清晰的節拍；關閉後則產生較平靜的展示效果，適合辦公室牆面、大廳或候診室等不希望計時聲造成干擾的場景。翻頁效果使用帶有透視值的 CSS3 3D transform 渲染，卡片採用等寬數字槽位設計，讓較寬的「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) 來安排下一次觸發，使邊界落在實際的時鐘秒數上，並使用 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) 來安排下一次觸發，使邊界落在實際的時鐘秒數上，並使用 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)，使每次觸發落在實際的秒邊界上，而非累積計時器偏移
- 動畫計時：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。依個人偏好擇一即可；某些版本會預設跟隨作業系統的地區設定。
為什麼秒針有時會跳超過 1 秒？
這是背景分頁節流的影響。當你切走時，瀏覽器會降低更新頻率；切回時，時鐘為了追上會略過部分秒數。讓分頁保持在前景就能流暢運行。如果分頁在前景時仍會跳秒，代表 CPU 負載過高，請檢查還有什麼程式在執行。
翻牌動畫會影響效能嗎？
CSS transform 動畫由 GPU 加速，在現代裝置上負擔很輕。較舊的筆電或手機每秒可能會有輕微卡頓。若你偏好靜態錶面，可以在設定中關閉翻牌動畫。
可以整晚全螢幕顯示嗎？
可以——本工具就是設計成桌上或床頭時鐘來全螢幕使用。現代作業系統若不主動阻止會讓螢幕變暗或休眠（請在顯示設定中設成「永不休眠」，或使用作業系統層的 NoSleep 工具）。筆電請接上電源；電池模式下的睡眠機制會暫停分頁。
長時間運行還能保持準確嗎？
可以。時鐘以系統時間為來源，連網裝置會透過 NTP 校時。在現代作業系統上，連續執行 24 小時的時間漂移通常在 1 秒以內。
會有任何資料被上傳嗎？
不會。時鐘只讀取你裝置的時間，不會記錄或傳送任何資料。