Count down to a date with plain JavaScript

Count towards a real deadline

Use a countdown for an event or release time, while showing the actual date alongside it. The demo is a browser-only calculation: it does not reserve anything, change a booking or enforce a deadline.

The important detail is to subtract the current clock time on every update. Decrementing a counter once a second drifts when a background tab is slowed down.

Markup

<p>Starts <time datetime="2028-01-05T15:00:00Z">5 January 2028, 15:00 UTC</time>.</p>
<p id="countdown" role="timer" aria-live="off">Countdown is not running.</p>
<div id="countdown-controls" hidden>
  <button type="button" id="start-countdown">Start</button>
  <button type="button" id="pause-countdown">Pause</button>
</div>

JavaScript

Put this in a deferred script. Each call owns its own timer.

function createCountdown(output, deadline) {
  if (!Number.isFinite(deadline)) throw new TypeError('A valid deadline is required');
  let timer = null;
  let running = false;
  let destroyed = false;

  function draw() {
    const seconds = Math.max(0, Math.ceil((deadline - Date.now()) / 1000));
    const days = Math.floor(seconds / 86400);
    const hours = Math.floor(seconds % 86400 / 3600);
    const minutes = Math.floor(seconds % 3600 / 60);
    output.textContent = seconds === 0 ? 'The countdown has finished.'
      : `${days}d ${hours}h ${minutes}m ${seconds % 60}s`;
    return seconds;
  }

  function tick() {
    timer = null;
    if (!running || document.hidden) return;
    if (draw() > 0) timer = setTimeout(tick, 1000);
    else running = false;
  }
  function start() {
    if (destroyed) return;
    clearTimeout(timer);
    running = true;
    tick();
  }
  function pause() {
    running = false;
    clearTimeout(timer);
    timer = null;
  }
  function visibility() {
    clearTimeout(timer);
    timer = null;
    if (running && !document.hidden) tick();
  }
  document.addEventListener('visibilitychange', visibility);
  draw();
  return { start, pause, destroy() {
    pause();
    destroyed = true;
    document.removeEventListener('visibilitychange', visibility);
  } };
}

const countdown = createCountdown(
  document.querySelector('#countdown'),
  Date.parse('2028-01-05T15:00:00Z'),
);
document.querySelector('#countdown-controls').hidden = false;
document.querySelector('#start-countdown').addEventListener('click', countdown.start);
document.querySelector('#pause-countdown').addEventListener('click', countdown.pause);

Dates, accessibility and cleanup

Z means UTC. For an event with a known offset, use a complete timestamp such as 2028-07-05T15:00:00+01:00; do not rely on an ambiguous date string or a visitor's local timezone. Validate user-entered calendar dates separately before converting them.

Days here are elapsed 24-hour blocks, not local calendar days across daylight-saving changes. Pause freezes the display, not the deadline; Start catches up. The timer is not a live announcement every second, and the readable deadline remains without JavaScript.

Call countdown.destroy() when removing this view in a client-routed application, and remove its button listeners along with the view. For an enforceable sales deadline, the server must make the decision: a visitor can change their clock or the script.

References: Date.parse, timer delays, and page visibility.