How to Convert Seconds to HH:MM:SS Format in JavaScript

When dealing with durations, such as the length of an audio clip or a countdown timer, you often have a total number of seconds that you need to display in a human-readable format like MM:SS or HH:MM:SS. This conversion requires a bit of math to extract the different time components from the total seconds.

This guide will teach you how to create a single, robust function to convert a total number of seconds into a formatted time string. We'll cover the core logic using division and the modulo operator and show how to easily adapt the function for different formats.

The Core Concepts: Division and the Modulo Operator

The key to this conversion is a two-step process for each unit of time (hours, minutes, seconds).

1. Division: You divide the total number of seconds by the appropriate conversion factor (60 for minutes, 3600 for hours) to get the whole number of units. Math.floor() is used to discard any fractional part.
2. Modulo (%): The modulo operator gives you the remainder of a division. We use it to get the "leftover" part of the time after accounting for the larger units. For example, totalSeconds % 60 gives you the remaining seconds after all full minutes have been accounted for.

Solution: A Reusable secondsToTime Function

This function encapsulates all the necessary logic and provides a clean, zero-padded HH:MM:SS string as output.

For example, you have a duration in seconds and need to display it in a standard time format.

// Problem: How to convert this duration into "01:30:45"?
const totalSeconds = 5445;

The solution:

function secondsToTime(totalSeconds) {
  // Get the total number of hours and subtract it from the total seconds.
  const hours = Math.floor(totalSeconds / 3600);
  
  // Get the remaining minutes and subtract them.
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  
  // Get the remaining seconds.
  const seconds = Math.floor(totalSeconds % 60);

  // Use `padStart` to add a leading zero if a value is less than 10.
  const paddedHours = hours.toString().padStart(2, '0');
  const paddedMinutes = minutes.toString().padStart(2, '0');
  const paddedSeconds = seconds.toString().padStart(2, '0');

  return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;
}

// Example Usage:
console.log(secondsToTime(5445)); // Output: "01:30:45"
console.log(secondsToTime(300));  // Output: "00:05:00"
console.log(secondsToTime(86400));// Output: "24:00:00"

How the Logic Works

Let's break down the function with an example input of 5445 seconds.

1. Calculate Hours:

   • 5445 / 3600 = 1.5125.
   • Math.floor(1.5125) gives us 1. So, hours = 1.

2. Calculate Minutes:

   • 5445 % 3600 = 1845. This is the number of seconds remaining after accounting for the full hour.
   • 1845 / 60 = 30.75.
   • Math.floor(30.75) gives us 30. So, minutes = 30.

3. Calculate Seconds:

   • 5445 % 60 = 45. This is the number of seconds remaining after accounting for all full minutes. So, seconds = 45.

4. Padding: The padStart(2, '0') method is a clean, modern way to ensure each component is two digits long, adding a leading 0 if necessary (e.g., 5 becomes '05').

Adapting the Output (e.g., MM:SS only)

A common requirement is to show only minutes and seconds, especially for durations under an hour. You can easily adapt the function for this.

function secondsToMinutesAndSeconds(totalSeconds) {
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  const paddedMinutes = minutes.toString().padStart(2, '0');
  const paddedSeconds = seconds.toString().padStart(2, '0');
  
  return `${paddedMinutes}:${paddedSeconds}`;
}

// Example Usage:
console.log(secondsToMinutesAndSeconds(155)); // Output: "02:35"
console.log(secondsToMinutesAndSeconds(59));  // Output: "00:59"

note

This simpler function omits the hour calculation and is perfect for shorter durations.

Practical Example: A Simple Timer Display

This script simulates a countdown timer and uses our conversion function to format the remaining time for display.

let remainingSeconds = 125;

const timer = setInterval(() => {
  if (remainingSeconds <= 0) {
    clearInterval(timer);
    console.log('Countdown finished!');
    return;
  }
  
  // Format the remaining time for display
  const formattedTime = secondsToMinutesAndSeconds(remainingSeconds);
  
  // In a real app, you would update a DOM element here.
  console.log(`Time Remaining: ${formattedTime}`);
  
  remainingSeconds--;
}, 1000);

// Helper function from above
function secondsToMinutesAndSeconds(totalSeconds) {
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  const paddedMinutes = minutes.toString().padStart(2, '0');
  const paddedSeconds = seconds.toString().padStart(2, '0');
  
  return `${paddedMinutes}:${paddedSeconds}`;
}

Conclusion

Converting a total number of seconds into a formatted time string is a straightforward task using basic arithmetic.

• The core of the logic is using division and the modulo operator (%) to isolate the different time components (hours, minutes, and seconds).
• The String.prototype.padStart() method is the best modern tool for adding leading zeros to ensure a consistent HH:MM:SS or MM:SS format.
• By encapsulating this logic in a reusable function, you can create clean and maintainable code for any time-display needs.