Cat Toolbox
Help CatBlog About Partnership 中文

Countdown, Pomodoro and Stopwatch: Which One Still Keeps Time in a Hidden Tab

TimeUpdated 2026-09-29

All three pages measure time, and all three show it as minutes and seconds without an hours field. The difference that matters sits one level down, in how each one decides what "now" is.

The stopwatch asks the system clock. Every 20 ms it computes now − start, so the number on screen is derived from real time. The countdown and the Pomodoro timer never read the clock at all: they start an interval that fires once a second and subtract one from a counter. A browser throttles intervals in background tabs, and a sleeping machine stops them outright, so those two count ticks, not seconds — which is why they run slow after a quiet stretch and never catch up.

That single design choice explains most of the advice below. Everything else is display conventions and corner cases, and every figure here was produced by driving the pages' own scripts.

Clock-derived against tick-counted

Stopwatch Countdown / Pomodoro
What advances the display Date.now() − startTime remaining-- once per interval tick
Refresh every 20 ms every 1000 ms
Hidden tab display freezes, jumps to the correct total on return runs slow, stays slow
Machine sleep corrected on the next frame not corrected
Pause and resume start is moved forward by the elapsed amount, so nothing accumulates the counter simply stops being decremented

The stopwatch consequence is easiest to see in numbers. Left running with the clock advancing five seconds but no refresh allowed, the display stayed at 00:07.00; on the next frame it read 00:12.00 — the whole five seconds, minus nothing. The countdown under the same treatment would have lost all five.

What each page reads from you, and when

Page Inputs When they are read Effect
Countdown Hrs / Mins / Secs boxes, five presets on Reset — and on Start only when the counter has already reached zero the current run keeps the duration it started with
Pomodoro Focus and Break boxes, two mode buttons on Reset and on every mode switch changing a number mid-run does nothing until one of those
Stopwatch none — there is nothing to configure; laps are the only input

The Pomodoro detail is the one people trip over: typing a new focus length and then pressing Start does not use it. Measured on the page — the field set to 30, Start pressed, and the display still began at 25:00; a Reset afterwards loaded 30:00. The hint under the timer says as much in both languages.

The countdown: presets, fields, and what each press does

The five presets are 1 minute, 5, 10 and 30 minutes, and 1 hour (60 to 3600 seconds). Choosing one also writes the boxes — 1 hour fills Hrs 1 / Mins 0 / Secs 0, 10 minutes fills 0 / 10 / 0 — resets the bar to empty, and hides any "Time's up!" notice. If the countdown was running, the preset stops it first rather than loading a new duration under a running count; the button is left reading Resume.

The display is total minutes and seconds, so an hour reads 60:00 and two hours read 120:00. The count itself is in seconds and always exact; only the formatting compresses. The boxes are parsed with parseInt, which gives three behaviours worth knowing:

  • Decimals are truncated, not rounded. Mins 1.5 and Secs 30.9 load 90 seconds and display 01:30.
  • Anything unparsable counts as zero. abc in Mins behaves as 0; an empty box behaves as 0.
  • Negative numbers are accepted. Mins −5 loads −300 seconds and the display shows 0-5:00 — the hour-and-minute formatting glues a leading zero onto a negative number. Press Start and the first tick puts 00:00 on screen with the alert and the tone.

The max attributes on the boxes (99 / 59 / 59) are hints rather than limits. Setting Hrs to 120 loads 432 000 seconds and displays 7200:00; the page runs it, and only the display convention is unusual. The largest duration the boxes are designed for, 99:59:59, is 359 999 seconds and shows as 5999:59.

When the count reaches zero the page stops itself, shows the ⏰ notice, and plays a half-second 800 Hz tone. The button reads Resume, not Start — and that is accurate, because the counter is at zero and pressing it does the sensible thing: it re-reads the three boxes and starts from the top, in a single press. The tone is generated with the Web Audio API inside a try/catch, so if the browser has not been interacted with yet it is silently skipped while the visual notice still appears.

A zero-length countdown is accepted rather than rejected. With all three boxes at zero the display reads 00:00, Start switches the button to Running, and one second later the alert appears and the tone plays. The progress bar stays empty, because the percentage is computed as (total − remaining) / total and a zero total is forced to 0.

The Pomodoro timer: a two-phase loop with a memory

The loop is focus → break → focus, with no long break after the fourth block and no automatic start. When a phase reaches zero the timer stops, plays the same 800 Hz tone, and switches the mode 500 ms later — but it does not begin counting. The display reads the new phase's full length and waits: measured, the focus phase ended at 00:00 and half a second later the timer sat at 05:00 in break mode, stopped. That is deliberate; a break that starts counting while you are still mid-sentence is worse than no break.

The counter underneath goes up by one only when a focus phase finishes. Break phases play their tone and hand back to focus without touching the tally. Measured through two focus blocks and two breaks: the count went 0 → 1 → 2, never moving during a break, and the label is written as N pomodoros completed — plural, so the first one reads "1 pomodoros completed". Neither Reset nor a mode switch clears it; only reloading the page does.

Three input behaviours come from the fields being read with parseInt(v) || 25 (and || 5 for break):

  • Empty, unparsable, or exactly zero all fall back to the default. Focus 0 is treated the same as a blank field, so you cannot accidentally create a zero-length phase — you get 25 minutes.
  • Decimals truncate. Focus 2.5 loads 2 minutes.
  • The min/max attributes are not enforced. Focus 200 is accepted and loads 12000 seconds, displayed as 200:00. The box says 120; the code does not care.
  • A negative focus length is accepted and then blocks the timer. Focus −5 loads −300 seconds and displays 0-5:00; pressing Start does nothing at all, because the start handler sees a non-positive remainder, re-reads the field, and returns. Measured through a tick and half a second of waiting: the display never moved. The way out is to put a usable number back and press Reset.

One quirk is worth memorising because it looks like a broken button. When a phase has just finished and the counter is at zero, the first press of the primary button only resets — it reloads the phase and shows the full duration without starting. The second press starts. No text on the page explains it; it is a plain consequence of the zero-remainder guard in the start handler.

Mode buttons are inert while the timer runs: pressing ☕ Break mid-focus left the mode, the remaining time and the progress bar untouched. Stop or reset first.

The stopwatch: splits, and the one honest limitation

The readout is minutes, seconds and hundredths — 02:47.63. Internally it keeps milliseconds and floors to hundredths, so the visible resolution is 10 ms while the display refreshes every 20 ms. There is no hours field and no rollover: 60 minutes reads 60:00.00, 90 minutes 90:00.00, and the minutes position simply keeps growing.

Start begins a run; the same button pauses and resumes it. Pausing stores the elapsed total and resuming moves the start point forward by that amount, so repeated pauses cannot accumulate an error — measured across a pause with four seconds of wall time spent elsewhere: 6000 ms before, 7000 ms after one further second of running.

Lap works only while the clock is running and is disabled while paused or stopped. Each press stores the running total, and the list renders three things per row: the lap number (Lap 1 / 计次 1), the split for that lap, and the cumulative total when it was recorded. The first split is the first total, because there is nothing before it to subtract from; later splits are one total minus the previous one.

Two rules about the highlighting, both measured:

  • It only starts at the third lap. With one or two laps nothing is marked, because there is no meaningful comparison to make. From the third lap, the fastest and slowest splits are coloured.
  • Ties are marked as ties. The test is "equals the minimum → fastest, else equals the maximum → slowest", so if every split is identical, every row is marked fastest rather than only the first.

And the honest limitation: a lap records the last refreshed value, not the exact moment of the press. Since the display refreshes every 20 ms, a recorded lap can be up to about 20 ms earlier than the real press. Measured at a true 1039 ms of elapsed time, the stored lap was 1020 ms — 19 ms short. That is invisible when pacing a run and too coarse for anything that needs to be synchronised.

The list has no size limit and no per-row delete; Reset clears the clock and every lap together. Nothing is written to storage, so a reload loses the whole run.

Which page to reach for

  • Cooking, a workout, a talk you are giving — the countdown, because the presets are one tap and the alert is unmissable. Keep the tab visible if the end point has to be exact.
  • Working in blocks — the Pomodoro timer, and set the lengths before you start a block, since nothing changes mid-run. Remember there is no long break: set the break field longer once you are four blocks in.
  • Anything you will report as a number — the stopwatch, because it is the only one of the three that is clock-corrected. Pair it with a hardware timer if a rulebook is involved.
  • A hard deadline where the clock matters more than the convenience — none of these. Use the system clock or an alarm; what all three measure is real time, but two of them measure it by counting.

FAQ

Why did my countdown fall behind while I was in another tab? It counts one second per tick rather than reading the clock, and browsers throttle intervals in background tabs. The count keeps running, just slower than reality, and it does not correct itself when you come back. Reset and start again if the end point matters.

Why is my stopwatch not affected by the same problem? Because it recomputes now − start on every frame. A throttled tab freezes the display but not the arithmetic; the next frame shows the true total. Measured: a five-second gap appeared as an instant jump from 00:07.00 to 00:12.00.

Why does pressing Start after a Pomodoro phase ends do nothing? It does something — it reloads the phase and shows the full duration, without starting. Press it again to begin counting. It is the zero-remainder boundary: the handler treats the finished phase as needing a reset first.

I changed the focus length and the timer still used 25 minutes. The fields are read on Reset and on mode switches, not on Start. Press Reset after editing, then Start. The same applies to the countdown, where only Reset reloads the duration.

Can I set a 200-minute focus block? Yes, despite the box saying 120. The min and max attributes are not checked anywhere; 200 loads 12000 seconds and displays 200:00. The only inputs that genuinely fall back are blank fields, unparsable text, and zero, all of which give you the 25/5 defaults.

Why does the display read 0-5:00? A negative entry was accepted. Mins −5 or Focus −5 both load negative seconds, and the minutes-and-seconds formatter pads a negative minute count with a leading zero, producing 0-5:00. The countdown fires its alert on the first tick; the Pomodoro timer simply refuses to start until you fix the field.

Do laps round or truncate? Truncate. The hundredths shown are floored, not rounded, so 9.999 seconds reads 00:09.99. The deeper limitation is the refresh interval: a lap can be up to 20 ms earlier than your press.

Why is only one lap highlighted in green when I pressed lap at the same pace? Probably because one split was a few milliseconds shorter, and from the third lap on the page marks the fastest and slowest. If all splits are exactly equal, every row is marked fastest — the comparison is equality against the minimum first.

Does any of this survive a refresh? No. None of the three pages writes to local storage: the countdown reloads at 5 minutes, the Pomodoro timer returns to 25/5 with a count of zero, and the stopwatch returns to 00:00.00 with an empty lap list.

Are there keyboard shortcuts? No. The buttons are the only controls, and space and the arrow keys behave as the browser normally would.

Tools used in this guide

Advertisement