Gaokao Countdown

The Gaokao Countdown tracks the remaining time before China’s national college entrance examination in days, hours, minutes, and seconds. Its value is practical rather than decorative: students can align revision blocks, mock exams, rest days, document checks, and travel arrangements around a single visible deadline. Parents and teachers can use the same date reference when planning support without repeatedly recalculating the interval. It does not judge preparation quality or predict scores; it simply turns a distant exam date into a concrete time budget, which matters during the final months when vague planning often becomes misleading.

The countdown is a one-line subtraction wrapped in a refresh loop. The remaining duration is computed as `target.getTime() - Date.now()` in milliseconds, then decomposed by integer division: days = `Math.floor(diff / 86400000)`, hours = `Math.floor(diff / 3600000) % 24`, minutes = `Math.floor(diff / 60000) % 60`, seconds = `Math.floor(diff / 1000) % 60`. The target moment is fixed: Gaokao is held annually on June 7 starting at 09:00 China Standard Time (UTC+8), with some new-Gaokao provinces extending to a fourth day. The rollover rule compares `Date.now()` against `new Date(year, 5, 9, 17, 0)` - JS months are 0-indexed, so 5 is June - and advances `year` by one once that instant has passed. Two timing pitfalls drive the refresh loop. First, `setInterval(fn, 1000)` drifts: the callback may fire 1003-1020 ms later under main-thread contention, and the drift accumulates because the next deadline is scheduled from the previous fire, not from a wall-clock anchor. The fix is to schedule `setTimeout` with a delay of `1000 - (Date.now() % 1000)` so each tick re-aligns to the next whole second, or to recompute the displayed value from `Date.now()` on every fire rather than incrementing a counter. Second, the HTML5 Page Visibility API and browser throttling clamp background-tab timers to roughly once per minute (1 Hz minimum in modern Chrome/Firefox/Safari when the tab is hidden); the page reconciles by recomputing from `Date.now()` on `visibilitychange` rather than counting interval fires. `requestAnimationFrame` is reserved for the smooth digit-flip animation and is paused automatically when the tab is hidden, so it must not be the source of truth for the timestamp. Localization uses the device timezone returned by `Intl.DateTimeFormat().resolvedOptions().timeZone`. For a candidate sitting outside UTC+8, the displayed countdown still targets China Standard Time, so the target is constructed once with `Date.UTC(year, 5, 7, 1, 0, 0)` - 09:00 CST is 01:00 UTC - rather than the local-time `Date` constructor which would silently use the device offset. Leap years matter only when the user's planning anchor falls on Feb 29: a 100-day sprint started on Feb 29 lands on a different calendar date than the same sprint started on Feb 28 of a non-leap year. Storage is `localStorage` for the optional theme and target date overrides; the optional notification at T-0 uses `Notification.requestPermission()` once per session and `new Notification(title, { body })` to surface a system-level alert without leaving the page.

• Core formula: `diff = target.getTime() - Date.now()`; days = `Math.floor(diff / 86400000)`, then `% 24`, `% 60`, `% 60` for h/m/s. Constants: 86,400,000 ms/day, 3,600,000 ms/hour, 60,000 ms/min.
• Target: June 7, 09:00 China Standard Time (UTC+8). JS month index is 5 for June. Rollover triggers when `Date.now() > new Date(year, 5, 9, 17, 0)`; then `year += 1`.
• Timer drift: `setInterval(fn, 1000)` drifts under main-thread load. Self-correcting pattern: `setTimeout(fn, 1000 - Date.now() % 1000)` re-aligns each tick to the next whole second.
• Background throttling: Page Visibility API + browser policy clamps hidden-tab timers to 1 Hz (Chrome/Firefox/Safari). Reconcile by recomputing from `Date.now()` on `visibilitychange`, not by counting fires.
• Timezone: build the target via `Date.UTC(year, 5, 7, 1, 0, 0)` (09:00 CST = 01:00 UTC) so candidates outside UTC+8 still see a correct countdown to the exam moment, not their local 09:00.
• Persistence: `localStorage.setItem(key, value)` (synchronous, ~5 MB origin quota) for theme and target overrides. Notifications use `Notification.requestPermission()` then `new Notification(title, { body, icon })`.
• Rendering: `requestAnimationFrame` drives the digit-flip animation (auto-paused when hidden); the displayed digits are recomputed from `Date.now()` each frame, not incremented, so a missed frame never under-counts.