Stopwatch and countdown timer

A clear answer. Here’s how.

Two timers on one page. The stopwatch counts up and keeps a lap table: each lap shows its own time and its split (the total at that lap), the fastest and slowest laps are marked in words as well as colour, and the laps can be copied or downloaded as CSV. The countdown counts down from a time you type or one of the quick times, shows a clear finished state, can play a beep made on your device with the Web Audio API, and puts the time left in the browser tab title so it can be read from another tab. Time is always worked out as the difference between two readings of the browser’s monotonic clock, performance.now(), never by counting timer ticks. A tab that is throttled, in the background or on a locked screen therefore reads the right time as soon as it is looked at again, and a countdown that is paused and resumed finishes when its remaining time has run out. The display shows hundredths of a second, but display resolution is not accuracy: browsers round the clock to between 5 and 100 microseconds, the screen redraws about 60 times a second and your own reaction time is far longer than either. If the device goes to sleep the browser clock may or may not keep running (MDN notes that only browsers on Windows are known to keep it ticking), so a timer left running through sleep can be wrong. A hidden tab may run its timers only once a second, or once a minute in Chrome after five minutes, so the beep is scheduled on the audio clock when you press Start, which keeps its time; if the browser blocks sound, the finish still shows on screen and in the tab title. Nothing is stored or sent: the page sets no cookies, writes nothing to storage and makes no network request. Space starts or stops, L takes a lap and R resets, as shown on the buttons. Screen readers hear laps, stops, resets and the finish, not every tick.