Representing seconds in HH:MM:SS in JavaScript

Converting seconds to HH:MM:SS format is a common requirement in JavaScript applications for displaying durations, timers, and time intervals in a readable format. This article explores three practical methods to achieve this conversion.

Problem Statement

Given a number representing the duration in seconds, the task is to write a JavaScript function that converts the given duration into the format HH:MM:SS, where HH represents hours, MM represents minutes, and SS represents seconds.

Sample Input:

const durationInSeconds = 3665;

Sample Output:

01:01:05

In this case, the input durationInSeconds is 3665, which represents a duration of 3665 seconds. The expected output is the string "01:01:05", which represents 1 hour, 1 minute, and 5 seconds in the HH:MM:SS format.

Method 1: Using Division and Modulus (Recommended)

This method uses mathematical operations to extract hours, minutes, and seconds. Divide the total seconds by 3600 to get hours, use the remainder to calculate minutes, and use modulus for remaining seconds.

function formatTime(seconds) {
   const hours = Math.floor(seconds / 3600);
   const minutes = Math.floor((seconds % 3600) / 60);
   const remainingSeconds = seconds % 60;

   const formattedHours = String(hours).padStart(2, '0');
   const formattedMinutes = String(minutes).padStart(2, '0');
   const formattedSeconds = String(remainingSeconds).padStart(2, '0');

   return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

const seconds = 13550;
console.log(formatTime(seconds));

03:45:50

Method 2: Using Date Object

This approach creates a Date object from the seconds value and extracts time components using built-in Date methods. Note that this method may have timezone-related limitations.

function formatTime(sec) {
   const date = new Date(sec * 1000);
   const hours = String(date.getUTCHours()).padStart(2, '0');
   const minutes = String(date.getUTCMinutes()).padStart(2, '0');
   const seconds = String(date.getUTCSeconds()).padStart(2, '0');

   return `${hours}:${minutes}:${seconds}`;
}

const seconds = 13550;
console.log(formatTime(seconds));

03:45:50

Method 3: Using String Manipulation

This method converts the Date object to a UTC string and extracts the time portion through string manipulation.

function formatTime(sec) {
   const date = new Date(sec * 1000).toUTCString();
   const time = date.split(' ')[4];
   const [hours, minutes, seconds] = time.split(':');

   const formattedHours = String(hours).padStart(2, '0');
   const formattedMinutes = String(minutes).padStart(2, '0');
   const formattedSeconds = String(seconds).padStart(2, '0');

   return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}

const seconds = 13550;
console.log(formatTime(seconds));

03:45:50

Comparison

Conclusion

The division and modulus method is the most efficient and reliable approach for converting seconds to HH:MM:SS format. It provides precise control without timezone complications and offers the best performance for time formatting operations.