Click Speed Test (CPS Counter) — Free HTML CSS JS Snippet

Click-speed tests (often searched as "CPS test" or "clicks per second test") are a small but genuinely popular novelty tool category, and building one correctly involves more timing precision than it first appears. This snippet implements a complete, accurate CPS counter in vanilla JavaScript: a selectable test duration, a live countdown, a running click tally, a calculated clicks-per-second result with a skill tier, and a persisted personal best stored in localStorage.

Accurate timing with performance.now(), not setInterval counting

A naive implementation might count down by decrementing a variable inside a one-second setInterval, but that approach drifts — setInterval is not guaranteed to fire at exactly the requested interval under load, and integer-second countdowns cannot express fractional time remaining. This snippet instead records a single startTime timestamp using performance.now() (a monotonic, sub-millisecond-precision clock unaffected by system clock adjustments) the instant the test begins, and every 50 milliseconds a lightweight tick() function recalculates remaining = duration - (performance.now() - startTime) / 1000 from scratch. Because the remaining time is always derived from the actual elapsed wall-clock time rather than accumulated by repeated subtraction, the countdown stays accurate even if a particular tick() call is delayed by the browser's event loop — the next tick simply recalculates correctly rather than compounding the drift.

Duration presets as a segmented control

Three duration presets (5, 10, and 30 seconds) are implemented as a segmented control of .dur-btn buttons sharing a single data-dur attribute convention. selectDuration() updates the shared duration variable, toggles the .active class based on a numeric comparison against data-dur, and calls resetPanel() to sync every dependent display (the countdown label, the stored best score for that specific duration) to the newly selected duration. Duration selection is locked out with b.disabled = true while a test is running, preventing a user from changing the test length mid-attempt and corrupting the result.

First-click-starts, then counts pattern

The single click target button does double duty: while idle, clicking it calls startTest(), which records the start timestamp and immediately counts that very click as click number one (clicks = 1, not zero) since the click that starts the timer is itself a genuine click within the test window. Every subsequent click while running is true simply increments the counter and updates the live display. Once the countdown reaches zero, finishTest() disables further clicks by adding a .disabled class (checked at the top of the click handler, guarding against a click landing in the tiny window between the timer expiring and the disabled class being applied) and calculates the final result.

CPS calculation and skill tiering

The final CPS figure is clicks / duration, rounded to two decimal places via Math.round(value * 100) / 100 to avoid floating-point noise in the display while retaining meaningful precision. tierFor() then buckets that number into one of four skill labels using simple threshold comparisons: under 4 CPS is "Average", 4 up to 7 is "Fast", 7 up to 10 is "Very Fast", and 10 or above is "Superhuman" — mirroring the informal tiers that click-speed-test sites commonly use, since human click rates rarely exceed roughly 10-14 clicks per second even with practiced techniques like jitter-clicking or butterfly-clicking.

Persisting a personal best per duration

Because CPS is duration-dependent (short bursts tend to score higher than sustained 30-second attempts), best scores are stored separately per duration using a composite key, cps-best-{duration}, in localStorage. setBest() only overwrites the stored value if the new score genuinely exceeds it, and getBest() parses the stored string back to a float for display — together these give each duration preset its own persistent, always-improving personal record across browser sessions.