Convert Seconds to Time Format in JavaScript

February, 13th 2025 3 min read

Back-end services often return durations as raw seconds—numbers like 45000 that are not meaningful to users. To present readable timestamps such as 12:30:00 or 12 hours 30 minutes 00 seconds, we need utility functions that convert seconds into friendly formats. These are essential for video players, timers, task durations, logs, and any UI that displays elapsed or remaining time.

This guide explains how to convert seconds into multiple display formats using JavaScript. It also refines the logic into one universal function that is easier to maintain.

1. Convert Seconds to “HH hours MM minutes SS seconds”

This approach outputs a descriptive, human-friendly format. It zero‑pads values to maintain consistency.

const formatSeconds = seconds => {
  if (isNaN(seconds) || seconds < 0) return "00 hours 00 minutes 00 seconds";

  let secondTime = Math.floor(seconds);
  let minuteTime = Math.floor(secondTime / 60);
  let hourTime = Math.floor(minuteTime / 60);

  secondTime %= 60;
  minuteTime %= 60;

  return (
    `${hourTime.toString().padStart(2, "0")} hours ` +
    `${minuteTime.toString().padStart(2, "0")} minutes ` +
    `${secondTime.toString().padStart(2, "0")} seconds`
  );
};

console.log(formatSeconds(45000));
// "12 hours 30 minutes 00 seconds"

What this function does

Converts total seconds into hours, minutes, and seconds.
Ensures consistent two‑digit formatting.
Produces a clear, readable string.

2. Convert Seconds to “HH:MM:SS”

This format is common for clocks, countdowns, and media players.

const getSeconds = seconds => {
  if (isNaN(seconds) || seconds < 0) return "00:00:00";

  let secondTime = Math.floor(seconds);
  let minuteTime = Math.floor(secondTime / 60);
  let hourTime = Math.floor(minuteTime / 60);

  secondTime %= 60;
  minuteTime %= 60;

  return (
    `${hourTime.toString().padStart(2, "0")}:` +
    `${minuteTime.toString().padStart(2, "0")}:` +
    `${secondTime.toString().padStart(2, "0")}`
  );
};

console.log(getSeconds(45000));
// "12:30:00"

3. A Universal Conversion Function

To avoid repeated logic, here is a consolidated utility that supports both colon and text formats.

const convertTime = (seconds, format = "colon") => {
  if (isNaN(seconds) || seconds < 0)
    return format === "colon"
      ? "00:00:00"
      : "00 hours 00 minutes 00 seconds";

  let secondTime = Math.floor(seconds);
  let minuteTime = Math.floor(secondTime / 60);
  let hourTime = Math.floor(minuteTime / 60);

  secondTime %= 60;
  minuteTime %= 60;

  if (format === "colon") {
    return (
      `${hourTime.toString().padStart(2, "0")}:` +
      `${minuteTime.toString().padStart(2, "0")}:` +
      `${secondTime.toString().padStart(2, "0")}`
    );
  }

  return (
    `${hourTime.toString().padStart(2, "0")} hours ` +
    `${minuteTime.toString().padStart(2, "0")} minutes ` +
    `${secondTime.toString().padStart(2, "0")} seconds`
  );
};

console.log(convertTime(45000, "colon"));
console.log(convertTime(45000, "text"));

Why this helper is better

Single source of truth reduces redundancy.
Easy to expand into new formats later.
Ensures consistent validation behavior.

4. Additional Usage Examples

Accept user input

const input = prompt("Enter seconds:");
console.log(convertTime(Number(input), "colon"));

Use for countdown timers

const startCountdown = totalSeconds => {
  const timer = setInterval(() => {
    console.log(convertTime(totalSeconds, "colon"));
    if (totalSeconds <= 0) clearInterval(timer);
    totalSeconds--;
  }, 1000);
};

startCountdown(15);

Log processing or API runtimes

console.log("Task completed in:", convertTime(372));

5. Where to Use These Functions

Video and audio player timestamps
Countdowns and stopwatches
Task duration tracking
System logs (uptime, process time)
UI components with elapsed/remaining time

Conclusion

Time values in raw seconds are rarely user‑friendly. By converting them to readable formats, you improve both clarity and usability across your application. Whether you prefer HH:MM:SS or a descriptive text format, the examples above give you practical tools for transforming seconds into meaningful output. A universal conversion function also ensures your codebase remains clean and maintainable as your project grows.