Convert Milliseconds to Seconds, Minutes, and Hours in JavaScript

JavaScript can sometimes make working with time a bit difficult. In this post, we'll learn how to convert milliseconds to seconds, minutes, and hours using vanilla JavaScript.

We're going to start with a value, in milliseconds, and convert it to seconds, minutes, and hours. The end result should be a string with the number of hours, minutes, and seconds in theHH:MM:SS format.

Convert to Seconds

Let's say you started with this value:

JAVASCRIPT
const milliseconds = 76329456;

To get the seconds, we can divide the milliseconds by 1000.

JAVASCRIPT
const milliseconds = 76329456;

const seconds = milliseconds / 1000;

console.log(seconds); // 76329.456

Let's use Math.floor to round the number down to the nearest whole number.

JAVASCRIPT
const milliseconds = 76329456;

const seconds = Math.floor(milliseconds / 1000);

console.log(seconds); // 76329

Now, this is the number of seconds for the entire duration. We only want the number of seconds left over, so we can use the modulus operator.

JAVASCRIPT
const milliseconds = 76329456;

const seconds = Math.floor((milliseconds / 1000) % 60);

console.log(seconds); // 9

Convert to Minutes

Using the same process as we did for seconds, we can get the minutes. This time we have to divide the milliseconds by 1000, then by 60, then modulus it by 60.

Again, we want to use Math.floor to round the minutes down to the nearest whole number.

JAVASCRIPT
const milliseconds = 76329456;

const seconds = Math.floor((milliseconds / 1000) % 60);

const minutes = Math.floor((milliseconds / 1000 / 60) % 60);

console.log(minutes); // 12

Convert to Hours

Finally, we can convert the milliseconds to hours. This time we have to divide the milliseconds by 1000, then by 60, then by 60 again.

However, this time we need to use modulus 24 since there are 24 hours in a day.

JAVASCRIPT
const milliseconds = 76329456;

const seconds = Math.floor((milliseconds / 1000) % 60);

const minutes = Math.floor((milliseconds / 1000 / 60) % 60);

const hours = Math.floor((milliseconds / 1000 / 60 / 60) % 24);

console.log(hours); // 21

Great, now we have the number of hours, minutes, and seconds. We can use the HH:MM:SS format to display the time.

Formatting the Time

With all three numbers calculated, we can move on to formatting the time.

We can take advantage of JavaScript's type coercion to convert the numbers to strings and then use padStart to add a leading zero to the number if it's less than 10.

From there, we can join the formatted time together with a colon to get our final result.

JAVASCRIPT
const milliseconds = 76329456;

const seconds = Math.floor((milliseconds / 1000) % 60);

const minutes = Math.floor((milliseconds / 1000 / 60) % 60);

const hours = Math.floor((milliseconds / 1000 / 60 / 60) % 24);

 const formattedTime = [
    hours.toString().padStart(2, "0"),
    minutes.toString().padStart(2, "0"),
    seconds.toString().padStart(2, "0")
].join(":");

console.log(formattedTime); // 21:12:09

Now we can just wrap this up in a nice function and call it to get the formatted time.

JAVASCRIPT
const milliseconds = 76329456;

const formatTime = milliseconds => {
    const seconds = Math.floor((milliseconds / 1000) % 60);
    const minutes = Math.floor((milliseconds / 1000 / 60) % 60);
    const hours = Math.floor((milliseconds / 1000 / 60 / 60) % 24);

    return [
        hours.toString().padStart(2, "0"),
        minutes.toString().padStart(2, "0"),
        seconds.toString().padStart(2, "0")
    ].join(":");
}

const formattedTime = formatTime(milliseconds);

console.log(formattedTime); // 21:12:09

Conclusion

JavaScript can make it difficult to work with time. However, we learned how to convert milliseconds to seconds, minutes, and hours using vanilla JavaScript and even formatted the time to be in the HH:MM:SS format.

Now you can use that function in any of your JavaScript projects to convert milliseconds to hours, minutes, and seconds!

• Support Us
• Discord
• Share
• Post
• Share