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:
JAVASCRIPTconst milliseconds = 76329456;
To get the seconds, we can divide the milliseconds by 1000.
JAVASCRIPTconst 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.
JAVASCRIPTconst 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.
JAVASCRIPTconst 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.
JAVASCRIPTconst 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.
JAVASCRIPTconst 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.
JAVASCRIPTconst 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.
JAVASCRIPTconst 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!
- Managing PHP Dependencies with Composer
- Getting Started with Express
- Getting Started with Electron
- How to Serve Static Files with Nginx and Docker
- How to deploy a MySQL Server using Docker
- Learn how to use v-model with a custom Vue component
- Using Puppeteer and Jest for End-to-End Testing
- How to Scrape the Web using Node.js and Puppeteer
- Getting Started with Handlebars.js
- Learn how to build a Slack Bot using Node.js
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up a Local Web Server using Node.js