In this article, you’ll learn how to convert seconds to a `HH:MM:SS`

in JavaScript. You can do the calculation directly or use the functions of the Date class.

## Convert seconds to HH:MM:SS in JavaScript

You can do the math directly to get the hours and minutes, remember the conversions are something like this:

- 1 Minute = 60 Seconds
- 1 Hour = 60 Minutes
- 1 Hour = 3600 Seconds

Therefore, the steps would be:

- Get the hours by dividing the seconds by 3600
- Divide the total seconds by 3600 and get the remainder, which will be the remaining seconds after taking out the hours
- Take the new value and divide it by 60 to get the minutes
- Divide the new value by 60 and get the remainder, which will be the remaining seconds after taking out the minutes

So in code form, we get the output like this:

**Code:**

function convertSecondsToHHMMSS(totalSec) { const hour = Math.floor(totalSec / 3600); totalSec %= 3600; // Get remaining seconds const min = Math.floor(totalSec / 60); const sec = Math.floor(totalSec % 60); // Get remaining seconds const _hour = String(hour).padStart(2, "0"); const _min = String(min).padStart(2, "0"); const _sec = String(sec).padStart(2, "0"); console.log(`${_hour}:${_min}:${_sec}`); } convertSecondsToHHMMSS(30); convertSecondsToHHMMSS(4622); convertSecondsToHHMMSS(3600);

**Output:**

```
00:00:30
01:17:02
01:00:00
```

You may have noticed that the `Math.floor()`

function was used because dividing the hours or minutes could cause the number to contain decimal values. Therefore, the `Math.floor()`

function rounds the value down to remove any decimal values.

Additionally, you might have seen the remainder `%`

operator, which divides a number and returns its decimal values.

Another thing of note is the `String.prototype.padStart()`

function, which takes a String and adds a specified letter until it has reached a specified length (in this case 2). This completes the format of `HH:MM:SS`

as any value that’s only one digit would have an additional “0” in front of it.

**Using the **‘**Date**‘** Class**

As a reminder, the `Date`

class represents the number of milliseconds that have passed since ECMAScript’s epoch (which is January 1st 1970 or `1970-01-01 00:00:00:00 UTC+00`

). Though more importantly here is its constructor `Date(milliseconds)`

.

The `Date`

class’ constructor takes a number and returns a `Date`

representing the number of milliseconds after ECMAScripts epoch **in your computer’s timezone**. So you would need to keep that in mind.

Note that it is necessary to convert the seconds into milliseconds to be used in the constructor. Simply multiply the seconds by 1000 as a second = 1000 milliseconds.

**Using .getUTCHours(), .getUTCMinutes(), .getUTCSeconds()**

This would work exactly like the first example. As the name implies each function gets the hour, minutes and seconds respectively.

However, you might have noticed the “UTC” in the names of functions. UTC or Coordinated Universal Time describes timezones depending on each timezone’s longitude. Though in this context, the functions returns its value in UTC+00 and ignores your computer’s set timezone. This helps as the timezone will directly mess with the results if it’s not zero.

So we get something like this:

**Code:**

function convertSecondsToHHMMSS(totalSec) { const milisec = totalSec * 1000; const date = new Date(milisec); const hour = date.getUTCHours(); const min = date.getUTCMinutes(); const sec = date.getUTCSeconds(); const _hour = String(hour).padStart(2, "0"); const _min = String(min).padStart(2, "0"); const _sec = String(sec).padStart(2, "0"); console.log(`${_hour}:${_min}:${_sec}`); } convertSecondsToHHMMSS(30); convertSecondsToHHMMSS(4622); convertSecondsToHHMMSS(3600);

**Output:**

```
00:00:30
01:17:02
01:00:00
```

**Using Date.prototype.getISOString() and String.prototype.substring()**

Use this if you don’t wish to put each date value into variables and want a shorter way.

The `.getISOString()`

function takes a `Date`

and returns it in simplified extended ISO format and, importantly, is in `UTF+00`

and is a string, which is where the `.substring()`

function comes into play.

The `.substring()`

function returns a string that is, as the name implies, a sub-string of the string. In this context, it takes a substring of the timestamp that `.getISOString()`

returns (In this case, substring index 11 to 19).

So we get the result:

**Code:**

function convertSecondsToHHMMSS(totalSec) { const milisec = totalSec * 1000; const date = new Date(milisec).toISOString(); console.log(date.substring(11, 19)); } convertSecondsToHHMMSS(30); convertSecondsToHHMMSS(4622); convertSecondsToHHMMSS(3600);

**Output:**

```
00:00:30
01:17:02
01:00:00
```

Additionally, if you still want to get the date values, you can use the `.split()`

function to split the date string into an array of values by the “`:`

” character.

**Summary**

To convert seconds to a `HH:MM:SS`

format in JavaScript, you can either do the math yourself or use the `Date`

class’s functions or the `.getISOString()`

function. Relating to the `Date`

class, you can learn about how to get the first day of the month with the `Date`

class here. Thanks for reading!

**Maybe you are interested:**

- Get Year, Month and Day from a Date Object in JavaScript
- Add Seconds to a Date using JavaScript
- Format a Date as YYYY-MM-DD hh:mm:ss in JavaScript

Hello, my name is Davis Cole. I love learning and sharing knowledge about programming languages. Some of my strengths are Java, HTML, CSS, JavaScript, C#,… I believe my articles about them will help you a lot.

**Programming Languages**: Java, HTML, CSS, JavaScript, C#, ASP.NET, SQL, PHP