Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to convert seconds to HH-MM-SS with JavaScript?
In this tutorial, we will learn to convert seconds to Hours, Minutes, and Seconds (HHMM-SS) format in vanilla JavaScript.
The date and time are an integral aspect of our daily lives; date and time are frequently used in computer programming. You might need to write a website in JavaScript with a calendar, a rail schedule, or an interface for scheduling appointments. So, for such purposes, JavaScript provides us with some inbuilt functions like the getTime() returns the number of milliseconds since January 1, 1970, 00:00:00.
Using the toISOString() Method
We might need to put seconds into a well-formatted structure to make them easier to understand. Let's say we are using JavaScript to calculate the duration of an event, and the seconds are made up of a large number. In such cases, we need to convert the seconds to hours, minutes, and second format. This method is one of the simplest methods to convert seconds into the standard HH-MM-SS format.
Syntax
Users can follow the below syntax for the toISOString() method.
var calculatedTime = new Date( null ); calculatedTime.setSeconds( 5003 ); var newTime = calculatedTime.toISOString().substr( 11, 8 );
Example
The below example demonstrates the use of the toISOString() method for converting the seconds to HH-MM-SS with vanilla JavaScript. After setting the seconds and using the toISOString() method returned a long string which was then converted into a substring using the .substr() inbuilt method of JavaScript for getting the output in HHMM-SS format.
<html> <body> <h2>Convert seconds to HH-MM-SS</h2> <h4>Using <i>toISOString()</i> method to convert 5003 seconds to HHMM-SS format.</h4> <div id = "container"></div> </body> <script> var calculatedTime = new Date(null); calculatedTime.setSeconds( 5003 ); //setting value in seconds var newTime = calculatedTime.toISOString().substr(11, 8); document.getElementById("container").innerHTML = newTime; </script> </html>
Using only Math.floor() and Some Mathematical Logic
In this approach, we will use some simple mathematical logic and inbuilt mathematical tools provided by JavaScript, like Math.floor(), to convert given seconds into the HHMM-SS format. This would be the naive approach that strikes the mind first.
Syntax
var hoursLeft = Math.floor( seconds / 3600 ); var min = Math.floor(( seconds - hoursLeft * 3600 ) / 60 ); var secondsLeft = seconds - hoursLeft * 3600 - min * 60; secondsLeft = Math.round( secondsLeft * 100 ) / 100;
Algorithm
Step 1 − Since one hour is made up of 3600 seconds, hours can be computed by multiplying the seconds by 3600. This will reveal how many hours are present.
Step 2 − Use the Math.floor() method to round down the value from the previous step
Step 3 − Once the number of hours has been subtracted, discover the number of remaining seconds. The number of minutes is determined by dividing this amount by 60.
Step 4 − One can determine the seconds by deducting the number of seconds in minutes and hours from the total number previously provided.
Example
With the help of the example given below the user will be able to easily convert seconds into the HH-MM-SS format with the help of some simple mathematical logic.
<html> <body> <h2>Convert seconds to HH-MM-SS</h2> <h4>Using <i>Math.floor()</i> method.</h4> <div id = "container"></div> </body> <script> var seconds = 129; var hoursLeft = Math.floor(seconds / 3600); var min = Math.floor((seconds - hoursLeft * 3600) / 60); var secondsLeft = seconds - hoursLeft * 3600 - min * 60; secondsLeft = Math.round(secondsLeft * 100) / 100; var answer = hoursLeft< 10 ? "0" + hoursLeft : hoursLeft; answer += ":" + (min < 10 ? "0" + min : min); answer += ":" + (secondsLeft< 10 ? "0" + secondsLeft : secondsLeft); document.getElementById("container").innerHTML = "129 seconds to time is : " + answer; </script> </html>
This article covered the most efficient, time-saving, and easily understandable approaches to converting seconds into the HH-MM-SS format. One of the older approaches using an external library like moment.js was not covered in this blog as these libraries like Moment were built for the previous era of the JavaScript ecosystem and the current state of the web is significantly different.
Libraries like day.js, Luxon, and Date-fns are some alternatives to moment.js that can be used to directly get time in a specific format. All the methods work just fine but should be used according to the user's needs.
3K+ Views
