Skip to main content

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

When dealing with time durations—such as the length of a video, the duration of a phone call, or a countdown timer—you often need to convert between a total number of seconds and a formatted HH:MM:SS string.

This guide will teach you the standard, reliable methods for both of these conversions. You will learn how to use simple math to convert a total number of seconds into an HH:MM:SS string, and how to parse an HH:MM:SS string back into a total number of seconds.

Seconds to HH:MM:SS: Converting a Number to a Formatted String​

The conversion from a total number of seconds to the HH:MM:SS format is a classic math problem that involves division, remainders (modulo), and rounding.

The logic:

  1. Calculate Hours: Divide the total seconds by 3600 (the number of seconds in an hour) and round down.
  2. Calculate Minutes: Get the remainder from the hours calculation, divide that by 60, and round down.
  3. Calculate Seconds: Get the remainder from the minutes calculation.
  4. Format: Pad each component with a leading zero to ensure it is two digits.

The recommended solution: this function encapsulates the logic for a clean and reusable solution.

function secondsToHms(totalSeconds) {
  if (totalSeconds < 0) {
    return 'Invalid input';
  }

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

  // Helper to pad with a leading zero
  const padTo2Digits = (num) => String(num).padStart(2, '0');

  return `${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits(seconds)}`;
}

// Example Usage:
console.log(secondsToHms(3661)); // Output: "01:01:01"
console.log(secondsToHms(90));   // Output: "00:01:30"
console.log(secondsToHms(600));  // Output: "00:10:00"

HH:MM:SS to Seconds: How to Convert a Formatted String to a Number​

The inverse operation—parsing an HH:MM:SS string—involves splitting the string and performing simple multiplication.

The logic:

  1. Split: Use split(':') to break the string into an array of [hours, minutes, seconds].
  2. Calculate: Convert each component to a number and multiply it by the appropriate factor (hours * 3600, minutes * 60).
  3. Sum: Add all the results together to get the total number of seconds.

Solution:

function hmsToSeconds(hmsString) {
  const [hours, minutes, seconds] = hmsString.split(':');

  const totalSeconds =
    Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds);

  return totalSeconds;
}

// Example Usage:
console.log(hmsToSeconds('01:01:01')); // Output: 3661
console.log(hmsToSeconds('00:01:30')); // Output: 90

A Note on an Alternative Method (toISOString)​

You might see a clever but limited shortcut for converting seconds to HH:MM:SS using the Date object.

The toISOString Trick​

const seconds = 600;

// This works, but has limitations.
const result = new Date(seconds * 1000).toISOString().slice(11, 19);
console.log(result); // Output: "00:10:00"

Why This Method is Not Recommended:

  • Limited to 24 Hours: This method will fail for durations longer than 23 hours, 59 minutes, and 59 seconds. For example, 86400 seconds (exactly 24 hours) will result in 00:00:00, not 24:00:00.
  • Less Readable: The logic is not as clear as the mathematical approach. It relies on a "magic" slice operation on a date string format.

For these reasons, the manual mathematical approach is superior because it is more robust, has no upper limit, and is easier to understand and maintain.

Conclusion​

Converting between total seconds and the HH:MM:SS format is a fundamental task for handling time-based data.

  • To convert seconds to HH:MM:SS, use division and the modulo operator (%) to calculate the hours, minutes, and seconds components, then format them into a string.
  • To convert an HH:MM:SS string to seconds, split the string by the colon, and then multiply and sum the components.

By using the robust mathematical functions presented in this guide, you can handle these conversions reliably and without the limitations of date-based shortcuts.

Table of Contents