Đồng Hồ Pomodoro miễn phí

Cách hoạt động

Đồng hồ Pomodoro này chạy hoàn toàn trong trình duyệt không dùng thư viện bên ngoài nào. Việc đếm ngược được neo vào mốc thời gian thực bằng Date.now() nên việc trình duyệt giới hạn thẻ chạy nền không làm chậm đồng hồ, và mọi âm báo được tổng hợp khi cần qua Web Audio API — không tải tệp âm thanh nào.

1. 1
   Bộ máy đếm ngược theo giờ thực

   Khi bạn nhấn Bắt đầu, đồng hồ ghi lại mốc kết thúc tuyệt đối (Date.now() cộng số giây còn lại). Cứ mỗi 500 ms, setInterval tính lại số giây còn lại bằng cách lấy mốc cố định đó trừ thời gian hiện tại. Nếu trình duyệt giới hạn thẻ, phép tính tự điều chỉnh ngay ở nhịp kế tiếp.
2. 2
   Đồng bộ lại khi quay về thẻ

   Một trình nghe sự kiện visibilitychange gọi cùng hàm đồng bộ ngay khi bạn quay lại thẻ. Điều này có nghĩa hiển thị nhảy ngay đến thời gian còn lại đúng thay vì chờ nhịp 500 ms tiếp theo — quan trọng khi thẻ đã chạy nền trong thời gian dài.
3. 3
   Tổng hợp âm thanh bằng Web Audio API

   Ba âm báo (cổ điển, chuông, kỹ thuật số) được tạo hoàn toàn bởi AudioContext tích hợp của trình duyệt — một OscillatorNode đặt tần số và dạng sóng (sin hoặc vuông), và một GainNode áp dụng đường tăng giảm âm lượng theo hàm mũ để định hình đường bao. Không tệp âm thanh nào được tải hay giải mã.
4. 4
   Lưu cài đặt và số đếm trong ngày

   Thời lượng tùy chỉnh và số pomodoro đã hoàn thành hôm nay được ghi vào localStorage dưới hai khóa riêng. Khi tải trang, công cụ đọc lại chúng, kiểm tra mọi giá trị theo phạm vi cho phép và khôi phục đồng hồ — nên cài đặt của bạn vẫn giữ khi làm mới trang mà không cần gọi máy chủ.

Công cụ liên quan