How the timer stays accurate
A naive countdown subtracts a fixed amount from a counter on every tick, which drifts. Browser timers are not precise: setInterval guarantees a minimum delay, not an exact one, and each callback can be late by a few milliseconds or, under load, considerably more. Those small errors accumulate, so a counter-based timer running for an hour can end up seconds out.
This timer instead records an absolute deadline when you press start, computing Date.now() plus the requested duration. Every tick simply asks how much time is left until that deadline. A late tick shows a slightly older value and the next one catches up, so the error never accumulates and the timer finishes when it should regardless of how irregular the ticks were.
The display updates ten times a second, which is more often than the one-second resolution shown, so the visible seconds change close to the moment they actually change rather than up to a second late. Pausing stores the remaining time and resuming computes a fresh deadline from it, so a pause costs nothing in accuracy.
Duration mode and target date mode
Duration mode counts down a length of time from the moment you press start: hours, minutes and seconds, capped at 99 hours. Target mode counts down to a specific moment you pick, and the difference between those two is more than convenience. A duration is unaffected by clocks and calendars; a target date is interpreted in your device's local time zone.
That has practical consequences. A target set for 9:00 on a particular date means 9:00 where your device thinks it is, so the same target on a laptop set to a different time zone counts down to a different instant. If you are coordinating with people elsewhere, agree on an absolute moment and let each participant set it in their own local time rather than sharing a wall-clock time.
Daylight saving transitions are handled by the browser's own date arithmetic, so a target on the far side of a clock change lands on the wall-clock time you selected. The elapsed duration in that case will be an hour more or less than a naive calculation suggests, which is correct behaviour for a wall-clock appointment.
What happens when the tab is in the background
Browsers throttle timers in hidden tabs to save power, typically firing them once a second or less, and in some conditions suspending them for much longer. Because this timer is deadline-based rather than tick-based, throttling does not make it lose time: when you return to the tab, the display jumps to the correct remaining value rather than showing a stale count.
The alert is the part that suffers. The three-tone chime is generated with the Web Audio API at the moment the deadline passes, so if the tab is suspended when that happens the sound may be delayed until the tab is active again. Some browsers also require a user interaction before audio may play at all, which the start button satisfies for the current page.
There is no system notification and no service worker, so nothing will alert you if the tab is closed or the browser is quit. For a timer you genuinely need to be interrupted by, use your operating system's clock application or your phone. This is a visible on-screen timer with an audible finish, which suits meetings, cooking and focused work sessions where the page stays open.
Using a countdown well
Fixed-length work intervals are the most common use. The Pomodoro convention of 25 minutes of work followed by a 5 minute break exists because a visible deadline changes how a task feels: the end is known, which makes starting easier and makes interruptions easier to defer. The specific numbers matter far less than the interval being fixed before you begin.
For presentations and meetings, a visible countdown is a more effective timekeeper than a clock, because everyone in the room can see how much time remains without doing arithmetic. Setting a timer slightly shorter than the real slot leaves room to close properly.
Target date mode suits launches, deadlines and events. Because nothing is stored, the countdown resets when the page is reloaded, so it is a live display rather than a persistent tracker. Keep the tab open for the duration you need it.