Tutorial

How To Build a Countdown Timer in JavaScript

Step-by-step guide to create a vanilla javascript countdown timer: calculate time difference with the Date object, format days/hours/minutes/seconds, and update the UI using setInterval.

Drake Nguyen

Founder · System Architect

• Feb. 25, 2026, 12:22 a.m. • 3 min read

Introduction

A javascript countdown timer is a simple, useful UI element for launches, sales, reminders, and anywhere you want to display time left until an event. In this guide you will learn how to build a countdown timer in JavaScript (vanilla/js) that shows days, hours, minutes, and seconds — no libraries required.

Prerequisites

Basic familiarity with JavaScript and the Date object.
A code editor and a modern browser for testing.

Getting started — HTML skeleton

Create a minimal HTML file and include a container where the countdown will appear. This example uses a simple div with id="countdown" and an inline script to keep everything in one file.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Countdown Timer</title>
  </head>
  <body>
    <h2>Launch countdown</h2>
    <div id="countdown">Loading...</div>

    <script>
      // JavaScript goes here
    </script>
  </body>
</html>

How to calculate time left

To create a reliable javascript date countdown you compare a target timestamp with the current time (Unix timestamp in milliseconds). Convert both Date objects to milliseconds and subtract to get the remaining time in ms.

Example: countdown logic (vanilla JavaScript)

function formatCountdown(targetDate) {
  const now = Date.now(); // milliseconds since epoch
  const diff = targetDate.getTime() - now; // milliseconds remaining

  if (diff <= 0) return 'Time\'s up!';

  const secondsTotal = Math.floor(diff / 1000);
  const days = Math.floor(secondsTotal / (60 * 60 * 24));
  const hours = Math.floor((secondsTotal / (60 * 60)) % 24);
  const minutes = Math.floor((secondsTotal / 60) % 60);
  const seconds = Math.floor(secondsTotal % 60);

  const parts = [];
  if (days) parts.push(`${days} day${days !== 1 ? 's' : ''}`);
  if (hours) parts.push(`${hours} hour${hours !== 1 ? 's' : ''}`);
  if (minutes) parts.push(`${minutes} minute${minutes !== 1 ? 's' : ''}`);
  parts.push(`${seconds} second${seconds !== 1 ? 's' : ''}`);

  return parts.join(' ');
}

Displaying the countdown in the DOM

Use document.getElementById and innerHTML (or textContent) to update the countdown display. The following example demonstrates wiring up the formatter with setInterval so the display updates every second.

Complete example: countdown timer javascript using setInterval

(function () {
  const display = document.getElementById('countdown');
  // Set the target date (year-month-day or Date object)
  const target = new Date('2026-12-31T23:59:59');

  function update() {
    display.textContent = formatCountdown(target);
  }

  // Run once immediately and then every 1000ms
  update();
  setInterval(update, 1000);
})();

Tips and variations

If you need a persistent countdown across timezones, store the target as a UTC timestamp (Unix ms) and construct the Date from that number.
For a more compact display (e.g., "01:12:05"), pad numbers with leading zeros using String.prototype.padStart.
To build a countdown timer for website launch, style the output with CSS and optionally add callbacks when time reaches zero.
Using the Date object and Math.floor ensures consistent conversion of milliseconds to days hours minutes seconds.

Conclusion

This tutorial shows how to create a simple, reliable javascript countdown timer in vanilla JavaScript without jQuery or frameworks. You learned how to compute the time difference (Unix timestamp / milliseconds), split it into parts, format a readable string, and refresh the UI using setInterval. Try extending the example to show separate elements for days, hours, minutes, and seconds or to trigger an action when the countdown completes.

Further reading: search for "javascript countdown timer example code" or "vanilla javascript countdown timer tutorial" to explore more layouts and features.