線上倒數計時器

倒數計時器是一種從指定時長開始遞減到零的時間控制工具，適合專注學習、廚房烹飪、運動間歇、課堂活動、會議控時、演講排練等需要固定時間盒的情境。它不同於秒錶：秒錶從零開始往上記錄已經過多久，而倒數計時強調「還剩多久」與「何時結束」。清楚的剩餘時間能協助控制節奏，避免拖延或超時。本頁也提供秒錶與多計時器模式，可處理計次、分段與多個小任務並行計時。需要注意，計時依賴目前開啟的瀏覽器分頁，重要提醒時應保持頁面可用。

倒數引擎不使用 setInterval(callback, 1000) 作為權威時鐘——這種方式會累積漂移，因為 HTML5 事件迴圈規範只保證最小延遲，而非固定節奏。取而代之的是，頁面透過 Date.now()（或使用 performance.now() 取得次毫秒解析度）記錄 startTime，並在每個計時點計算 remaining = targetDuration - (Date.now() - startTime)。顯示更新由 requestAnimationFrame 驅動，瀏覽器會將其節流到顯示器 vsync 頻率（通常為 60 Hz / 16.67 毫秒，高刷新率筆電和手機上偶爾為 120 Hz）。這種自我校正的設計即使在 JavaScript 任務佇列因垃圾回收或長時間版面配置而停頓後，仍能保持顯示的秒數與實際時鐘一致。 背景節流是計時器意外的最大來源。根據 HTML 活動標準，隱藏分頁的 setInterval/setTimeout 最小間隔被限制為 1000 毫秒（Chrome、Firefox、Safari 各自使用不同的啟發式實作；Chrome 在電池供電時還會在約 5 分鐘後凍結非活動分頁）。Page Visibility API（document.visibilityState、document.hidden、visibilitychange 事件）讓計時器能偵測分頁切換，並在分頁回到前景時根據 Date.now() 重新校準內部時鐘。倒數結束的提示音透過 Web Audio API 播放（AudioContext + OscillatorNode 或預載入的 AudioBuffer），在 iOS Safari 和現代 Chrome 上需要先前的使用者手勢啟動以滿足自動播放政策。同時也會顯示視覺提示，如果使用者先前已授予權限，還可透過 Notification API 發送作業系統級別的通知。 多計時器模式將每個計時器保持在獨立的狀態物件中，各自擁有獨立的 startTime；單一 requestAnimationFrame 迴圈在每幀遍歷整個陣列，而非為每個計時器啟動獨立的 interval，這使得 CPU 工作量隨計時器數量增長保持穩定。跨重新整理的持久化使用 localStorage 儲存序列化的 endTime，因此頁面可在掛載時重新計算剩餘時間。需注意的是，作業系統的時鐘校正（手動調整時間、NTP 階躍或日光節約時間切換）會使 Date.now() 瞬間跳變，可能導致恢復的計時器出現時間跳躍——performance.now() 是單調遞增的，在單次頁面載入中僅關心經過時間時應優先使用。

• 使用 Date.now() 或 performance.now() 作為時間基準；不要信任累積的 setInterval 計次。
• requestAnimationFrame 將重繪限制在顯示器 vsync 頻率（60 Hz = 約 16.67 毫秒；120 Hz = 約 8.33 毫秒）。
• 隱藏分頁的 setInterval 根據 HTML 規範被節流至最小 1000 毫秒；Chrome 在電池供電時可能在約 5 分鐘後凍結頁面。
• Page Visibility API（visibilitychange 事件）是分頁回到前景時重新校準計時器的鉤子。
• Web Audio API 在 iOS Safari 和 Chrome 上需要先前的使用者手勢啟動以滿足自動播放政策。
• Notification API 需要 Notification.requestPermission() 和安全上下文（HTTPS 或 localhost）。
• performance.now() 在 NTP 階躍和日光節約時間跳變時保持單調遞增；Date.now() 則不然——請依需求選擇。