How To Convert Seconds To HH:MM:SS In JavaScript?

Posted on by Davis Cole
Convert seconds to HH:MM:SS in JavaScript

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:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *