How to write a countdown timer in JavaScript?

javascript

countdown-timer

javascript-class

event-loop

byNikita Barsukov·Feb 22, 2025

// Set your deadline, don't be late!
const endTime = new Date("YYYY-MM-DDTHH:MM:SS").getTime();

// Tick-tock, tick-tock goes the clock
const timer = setInterval(() => {
  const now = new Date().getTime();
  const remaining = endTime - now;

  // Time wrangling calculations
  const days = Math.floor(remaining / (24 * 60 * 60 * 1000));
  const hours = Math.floor((remaining % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
  const mins = Math.floor((remaining % (60 * 60 * 1000)) / (60 * 1000));
  const secs = Math.floor((remaining % (60 * 1000)) / 1000);

  // The suspense is killing me!
  document.getElementById("demo").textContent = `${days}d ${hours}h ${mins}m ${secs}s`;

  // Firebase is out, timer expired
  if (remaining < 0) {
    clearInterval(timer);
    document.getElementById("demo").textContent = "EXPIRED";
  }
}, 1000);

Insert this classic JavaScript piece into your HTML by placing it in an element with the id="demo". Set the YYYY-MM-DDTHH:MM:SS to your desired date/time. This countdown updates itself and terminates after reaching zero.

Step-by-step: crafting a reusable countdown timer

Creating a countdown timer might be a piece of cake but refining it for accuracy, flexibility, and reusability takes some special ingredients.

Constructing a modular countdown

We'll create a countdown that's a reusable component so it's an MVP (Most Valuable Player) for our overall app's performance. We'll wrap the timer's functionalities inside a JavaScript class, which makes it easier to control the lifecycle methods of the component.

class CountDownTimer {
    constructor(duration, display) {
        this.duration = duration; // like a good cake, we need the right amount
        this.display = display; // showtime!
        this.timer = null; // the calm before the storm
        this.tickFtns = []; // the quiet before the cacophony
    }
    // Now, let's go start the party, shall we?
    start() {
        if (this.timer) { return; } // Double checking if the party is already started?
        this.timer = setInterval(() => {
            this.duration -= 1; // Intense coutdown moment, isn't it?
            this.tickFtns.forEach(ftn => ftn(this.duration)); // Every tick-tok sings a song.
            this.render();
            if (this.duration <= 0) this.reset(); // Easy there, champ. It all comes full circle.
        }, 1000);
    }
    // Time to hit the reset button
    reset() {
        clearInterval(this.timer); // Rest, dear timer, you've earned it.
        this.timer = null; // scanf("%d",&timer);
        this.duration = 5 * 60; // Back to the future!
        this.render();
    }
    // Render, in glorious Technicolor
    render() {
        const minutes = parseInt(this.duration / 60, 10); // Don't minute the details.
        const seconds = parseInt(this.duration % 60, 10); // Hold your seconds, please.
        this.display.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
    // OnTick, do the cha-cha-cha
    onTick(ftn) {
        if (typeof ftn === 'function') { // Always check the label, kids.
            this.tickFtns.push(ftn);
        }
    }
}
// Usage, but we prefer 'playing' with it.
const display = document.querySelector('#time');
const timer = new CountDownTimer(300, display); 
timer.onTick(currentTime => {
    // Do fun stuff here. Draw a unicorn, maybe?
});
timer.start(); // Go, go, go!

Crafting an accurate timer

When milliseconds matter, always aim for precision. Here, we use Date.now() to measure time differences to avoid drift and increase accuracy. Now, who's got a stopwatch?

let endTime = Date.now() + 300000; // Couch to 5K!

function updateTimer() {
    let remaining = endTime - Date.now(); // "Bing, bing, bing, bam, bam, bam!" - Ross Geller
    if (remaining <= 0) {
        // Surprise! Time is up!
        return;
    }
    // Stay tuned...
    setTimeout(updateTimer, remaining % 1000 || 1000);
}
// Get the show on the road
updateTimer();

Responding to state and visibility changes

In a real-life application, you need to handle state and visibility changes. The Page Visibility API gives you just the tool you need to make your timer efficient and resource-friendly.

document.addEventListener('visibilitychange', () => { // I see you, or not...
    if (document.hidden) {
        // Hold the countdown! Count Dracula needs rest.
        timer.pause();
    } else {
        // Aaaand we're back in 3, 2, 1...
        timer.resume();
    }
});