Countdown Timer
Set hours, minutes and seconds or tap a preset, then watch a large mono readout and a progress ring count down to zero — with an optional beep that stays off until you ask for it.
Time remaining
Time remaining
00:05:00
Ready — press Start to begin the countdown.
Controls
Quick presets
The tone is synthesised in your browser with the Web Audio API — no sound file is downloaded. Leave it off for silent countdowns.
- Enter in a length field starts the countdown.
- Space starts or pauses when a control button has focus.
- The tab title shows the remaining time while the countdown runs.
How the countdown timer works
The page keeps one number: the moment the countdown should reach zero. Press Start and the script reads the current clock time, adds the length you set, and stores that target. From then on every animation frame asks a single question — how much time is left between now and the target? — and paints the answer into the readout and the ring. Pausing stores how much was left at that instant; resuming builds a fresh target from the paused value, so a pause of any length never changes what is left.
That design is the whole reason the timer survives a background tab. Browsers throttle timers in tabs you are not looking at, sometimes to a single tick per second, and some browsers stop repainting entirely. A timer that added one second per tick would quietly lose those ticks and drift; this one cannot, because it never counts — it only re-measures. When you come back, the display jumps straight to the correct remaining time, and if the target passed while you were away the page opens in its finished state.
| Part of the tool | What it does | Why it is built that way |
|---|---|---|
| Readout | Hours, minutes and seconds in a fixed-width mono font | Tabular numerals stop the digits jittering sideways as they change |
| Progress ring | An SVG circle whose stroke offset tracks the fraction remaining | A whole-arc length is known up front, so one number drives the drawing |
| Presets | 1, 3, 5, 10, 25 and 60 minute buttons | One press beats typing three fields for the common durations |
| Beep | An optional synthesised tone at zero | Generated live, so the page keeps working with no network at all |
| Tab title | Mirrors the remaining time while running | Lets you keep an eye on the timer from another tab |
The final 10 seconds badge appears once the last stretch begins. Because the display is recomputed every frame rather than once per second, the readout stays smooth instead of visibly stepping, although the painted time is always rounded down to the second so the numbers you see never overstate what is left.
Accuracy and honest limits
Inside a visible tab this timer is as precise as the browser's frame rate allows — on a typical 60 Hz display that is about 16 milliseconds per update, far finer than the seconds you read. Three real limitations are worth stating plainly rather than hiding.
- It follows the system clock. The remaining time is wall-clock arithmetic on timestamps, so if the operating system's clock is changed — a time-server correction, a manual fix or a daylight-saving jump — the countdown moves with it. The companion stopwatch avoids this by measuring with a monotonic timer instead.
- A hidden tab may not repaint. The deadline stays correct, but the pixels do not. If you need to watch the numbers continuously, keep the tab visible or use the browser's own picture-in-picture or full-screen arrangement.
- The alarm is a cue, not a ringtone. The beep is a short tone at a modest volume, it plays once, and it needs an open tab and a switched-on toggle. It is a deliberate nudge for cooking, a presentation or a stretch break — not a replacement for a phone alarm you would rely on to wake up.
Closing the tab cancels the countdown, and nothing is stored afterwards. While a countdown is running the page asks for confirmation before you navigate away, but that prompt is the browser's own dialog with the browser's own wording — the page cannot change the text, and some browsers skip it entirely if you have not interacted with the page.
How to use it
- Set the length. Type hours, minutes and seconds, or press a preset. Pressing Enter in any length field starts the countdown immediately; the presets only change the length while the timer is idle or paused.
- Start. The ring unwinds from a full circle as time runs down, and the tab title begins showing the remaining time so you can follow it from another tab.
- Pause and resume. Pause freezes the remaining time and re-opens the length fields, so you can round it to a new value before resuming. Resume continues from exactly where you stopped — the pause itself costs nothing.
- Watch the end. The last ten seconds are flagged, and at zero the readout settles on 00:00:00, a Time is up badge appears and the digits flash unless your system asks for reduced motion.
- Hear it or not. Switch on the labelled checkbox before you start if you want the beep; it is off on every visit and never turns itself on. Reset returns the timer to the length in the fields, ready to run again.
Nothing leaves your device. There is no upload, no account and no analytics call, and the tone is generated locally rather than streamed, so the whole page keeps working on a plane, in a locked-down network or with the browser in offline mode.
Frequently asked questions
Why does the countdown stay exact when I switch tabs?
The timer never counts by adding a second to a stored number. When you press Start it records a target time — the moment the countdown should reach zero — and every animation frame recomputes the remaining time as that target minus the current clock time. Browsers deliberately slow JavaScript timers in background tabs, sometimes to one tick per second or less, so an additive timer would fall behind while the tab is hidden and show the wrong number when you came back. Because this one measures against the clock instead, it returns from a background tab with the correct remaining time, and it will already show 'Time is up' if the moment passed while you were away.
How accurate is the countdown, and where does it break down?
In a visible tab it is typically accurate to a small fraction of a second, limited by your screen's refresh rate — roughly 16 ms per frame at 60 Hz. Three limits are worth knowing. First, date-clock changes: the countdown compares wall-clock timestamps, so moving the system clock or a daylight-saving jump shifts it; the stopwatch, which uses a monotonic timer, does not. Second, a background tab may not paint at all, so the display can freeze on a stale value until you return, even though the deadline itself is unchanged. Third, the sound needs a short lead: the Web Audio tone is scheduled the instant the countdown reaches zero, so allow a few tens of milliseconds for the audio hardware to start if you are cueing something important.
Will the alarm sound work, and is the beep on by default?
The tone is generated live in the browser with the Web Audio API — it is a short synthesised sine wave, not a downloaded sound file, so nothing is fetched from the network. Sound is off by default and only plays after you switch on the labelled checkbox, which also keeps you inside the browser's autoplay rules: browsers only allow audio in response to a user gesture, and toggling the box is that gesture. The tab must also stay open — a background tab still plays audio, but a closed tab cannot. If you need a louder or repeated alarm, a native phone alarm is the better tool; treat this beep as a gentle cue.
Does the page warn me before I navigate away?
Yes, while a countdown is running. If you try to close the tab, reload or follow a link, the browser asks you to confirm leaving, so an accidental click cannot silently discard a running timer. The warning is removed as soon as the countdown is paused, reset or finished, and it is only ever active while the timer is actually counting. Note that browsers show their own generic wording for that dialog and the page cannot customise it, and some browsers suppress the prompt entirely if you have not interacted with the page.
Sources & further reading
- MDN Web Docs — Date.now() — The wall-clock reading the countdown uses: a start timestamp is stored once, and every frame the remaining time is recomputed from it instead of being accumulated tick by tick.
- MDN Web Docs — Page Visibility API — Explains why hidden tabs are throttled and how visibilitychange fires. That behaviour is the reason a countdown must measure against the clock rather than count setInterval ticks.
- MDN Web Docs — Web Audio API — Reference for the AudioContext, OscillatorNode and gain envelope used to synthesise the optional end-of-countdown beep entirely in the browser.