Timer

How Timer Works

This is a simple countdown timer: set a duration in hours, minutes, and seconds (or pick a quick preset), press Start, and watch it count down to zero with a display accurate to the hundredth of a second, plus a beep and a browser tab-title alert when time runs out.

Formula & Method

When you press Start, the timer records the exact moment it should reach zero (current time plus your set duration) rather than simply subtracting one second at a time on each tick. Every animation frame, it recalculates the remaining time as end time − current time and redraws the display -- this wall-clock-based approach keeps the countdown accurate even if the browser tab is briefly throttled or a frame is delayed, rather than drifting the way a naive "subtract one second per tick" timer would. When the remaining time reaches zero, it plays a three-beep tone via the Web Audio API, vibrates the device if supported, and restores the page title.

Worked Example

Setting the timer to 5 minutes (the default) counts down from 00:05:00 to 00:00:00 -- pressing the "5 min" preset button fills in 0 hours, 5 minutes, 0 seconds automatically. Pressing Start begins the countdown immediately; pressing Pause freezes the remaining time exactly where it stands, and pressing Start again resumes from that exact point rather than restarting.

Frequently Asked Questions

Why does the timer show hundredths of a second?

The display includes a centiseconds readout (the small ".XX" suffix) for visual precision while the timer is running, calculated from the same millisecond-accurate remaining time used for the main countdown -- it's purely a display detail and doesn't change how the countdown itself is timed.

Will the timer still go off if I switch to another browser tab?

Yes -- because it tracks the actual target end time rather than counting ticks, pausing or throttling of background tabs by the browser doesn't cause it to lose track of when it should finish; it corrects itself as soon as the tab is active again.

What happens when the timer finishes?

The display shows 00:00:00, the label changes to "Time's Up!", a three-beep tone plays through the Web Audio API, the device vibrates briefly if your browser and hardware support it, and the browser tab title (which shows a live countdown while running) reverts to its normal title.

Can I change the duration once the timer is running?

No -- the hour, minute, second fields and preset buttons are disabled while the timer is running or paused with time remaining, so you'll need to press Reset first to edit the duration, then Start again.