Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert seconds to HH-MM-SS with JavaScript?
In this tutorial, we will learn to convert seconds to Hours, Minutes, and Seconds (HH:MM:SS) format in JavaScript.
Converting seconds to a readable time format is essential for displaying durations, timers, or elapsed time in web applications. JavaScript provides several approaches to achieve this conversion.
Using the toISOString() Method
The toISOString() method is one of the simplest approaches to convert seconds into the standard HH:MM:SS format. This method creates a Date object and extracts the time portion.
Syntax
var calculatedTime = new Date(null); calculatedTime.setSeconds(seconds); var newTime = calculatedTime.toISOString().substr(11, 8);
Example
The below example demonstrates using the toISOString() method to convert 5003 seconds to HH:MM:SS format:
<html>
<body>
<h2>Convert seconds to HH:MM:SS</h2>
<h4>Using <i>toISOString()</i> method to convert 5003 seconds to HH:MM: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 = "5003 seconds = " + newTime;
</script>
</html>
5003 seconds = 01:23:23
Using Math.floor() and Mathematical Logic
This approach uses simple mathematical calculations with Math.floor() to convert seconds into HH:MM:SS format. This method gives you more control over the formatting.
Algorithm
Step 1 ? Calculate hours by dividing seconds by 3600 (since 1 hour = 3600 seconds)
Step 2 ? Use Math.floor() to get the whole number of hours
Step 3 ? Calculate remaining seconds and divide by 60 to get minutes
Step 4 ? Calculate remaining seconds after subtracting hours and minutes
Example
This example shows how to convert 129 seconds using mathematical calculations:
<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;
// Format with leading zeros
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 = " + answer;
</script>
</html>
129 seconds = 00:02:09
Reusable Function Approach
Here's a clean, reusable function that combines the mathematical approach:
<html>
<body>
<h2>Reusable Function for Time Conversion</h2>
<div id="result"></div>
</body>
<script>
function secondsToHMS(seconds) {
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor((seconds % 3600) / 60);
var remainingSeconds = seconds % 60;
return [hours, minutes, remainingSeconds]
.map(val => val < 10 ? '0' + val : val)
.join(':');
}
// Test with different values
document.getElementById("result").innerHTML =
"3661 seconds = " + secondsToHMS(3661) + "<br>" +
"125 seconds = " + secondsToHMS(125) + "<br>" +
"7200 seconds = " + secondsToHMS(7200);
</script>
</html>
3661 seconds = 01:01:01 125 seconds = 00:02:05 7200 seconds = 02:00:00
Comparison
| Method | Pros | Cons |
|---|---|---|
toISOString() |
Simple, built-in formatting | Limited to 24-hour format, less control |
| Mathematical Logic | Full control, works with any duration | More code, manual formatting needed |
Conclusion
Both methods effectively convert seconds to HH:MM:SS format. Use toISOString() for simple cases under 24 hours, or the mathematical approach for more control and longer durations.
4K+ Views
