JavaScript Countdown Timer

A JavaScript countdown calculates the difference between a fixed target timestamp and the current time, then converts that remaining duration into days, hours, minutes, and seconds. Recalculate from timestamps on every update so page delays do not make the countdown drift.

const remaining = targetTime - Date.now();

Choose a Fixed Countdown Target Top ↑

const targetTime = new Date("2027-01-01T00:00:00+05:30").getTime();

Use an explicit offset or time-zone-aware server value when the event happens at a specific real-world instant.

Calculate the Remaining Milliseconds Top ↑

const remaining = Math.max(0, targetTime - Date.now());

Convert Milliseconds to Days, Hours, Minutes and Seconds Top ↑

const totalSeconds = Math.floor(remaining / 1000);
const days = Math.floor(totalSeconds / 86400);
const hours = Math.floor((totalSeconds % 86400) / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;

See Math.floor() for integer rounding.

Update the Countdown Display Top ↑

function updateCountdown() {
  const remaining = Math.max(0, targetTime - Date.now());
  output.textContent = formatRemaining(remaining);
}
const id = setInterval(updateCountdown, 1000);
updateCountdown();

Stop the Timer When the Countdown Reaches Zero Top ↑

if (remaining <= 0) {
  clearInterval(id);
  output.textContent = "Event started";
}

Keep the Same Target After Page Refresh Top ↑

Do not store only “86,501 seconds remaining” in the page and decrement it. Store or calculate the absolute event timestamp. After a refresh, calculate the difference again. The older downloadable countdown source and fixed-target countdown example illustrate the same general requirement, but the timestamp approach is more robust.

Countdown Time-Zone Considerations Top ↑

A countdown is easiest when the target is a precise instant. If users enter a local calendar date/time, decide which time zone that input belongs to and make that rule explicit. An ambiguous string can represent different instants on different systems.

Countdown Accuracy and Browser Throttling Top ↑

Intervals may run late, especially in inactive tabs. Because each display refresh subtracts Date.now() from the fixed target, a late callback does not permanently accumulate one-second errors.

Common Countdown Mistakes Top ↑

• Decrementing a counter and assuming every interval is exact.
• Using an ambiguous target date string.
• Continuing to run the timer after zero.
• Displaying negative values after the event.
• Confusing a duration with a calendar date.

Cross-language references from the original page: PHP tutorials and ASP tutorials.

Related: real-time clock, setTimeout(), stopwatch, and setting input focus.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: