How to convert seconds to time string format hh:mm:ss using JavaScript ?
Last Updated :
26 Sep, 2024
Converting seconds to a time string format hh:mm:ss in JavaScript involves transforming a given total number of seconds into its equivalent hours, minutes, and seconds. This helps in displaying time durations in a more readable, standard format for users.
Below is the approach to convert seconds to time string format hh:mm:ss using JavaScript
Approach 1: Passing the seconds to a date object
The passing seconds to a Date object approach converts seconds into milliseconds and creates a Date object. Using getUTCHours(), getUTCMinutes(), and getSeconds(), it extracts hours, minutes, and seconds, formatting them into the "hh:mm:ss" string.
Syntax:
dateObj = new Date(given_seconds * 1000);
hours = dateObj.getUTCHours();
minutes = dateObj.getUTCMinutes();
seconds = dateObj.getSeconds();
timeString = hours.toString().padStart(2, '0') + ':' +
minutes.toString().padStart(2, '0') + ':' +
seconds.toString().padStart(2, '0');Example: In this example, we use JavaScript to convert 3685 seconds into the hh:mm format by creating a Date object, extracting hours, minutes, and seconds, and displaying the result when a button is clicked.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>convert seconds to time string
format hh:mm:ss using JavaScript
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
JavaScript seconds to time
string with format hh:mm:ss
</b>
<p>No. of seconds is: 3685</p>
<p>
Time in hh:mm:ss is:
<span class="output"></span>
</p>
<button onclick="convertSecondstoTime()">
Get time in hh:mm:ss
</button>
<script type="text/javascript">
function convertSecondstoTime() {
given_seconds = 3685;
dateObj = new Date(given_seconds * 1000);
hours = dateObj.getUTCHours();
minutes = dateObj.getUTCMinutes();
seconds = dateObj.getSeconds();
timeString = hours.toString().padStart(2, '0')
+ ':' + minutes.toString().padStart(2, '0')
+ ':' + seconds.toString().padStart(2, '0');
document.querySelector('.output').textContent
= timeString;
}
</script>
</body>
</html>
Output:
Approach 2: Calculating the hours, minutes, and seconds individually
The calculating hours, minutes, and seconds individually approach divides the total seconds by 3600 for hours, uses modulus for minutes, and calculates the remainder for seconds. Each value is then formatted into the hh:mm string.
Syntax:
hours = Math.floor(given_seconds / 3600);
minutes = Math.floor((given_seconds - (hours * 3600)) / 60);
seconds = given_seconds - (hours * 3600) - (minutes * 60);
timeString = hours.toString().padStart(2, '0') + ':' +
minutes.toString().padStart(2, '0') + ':' +
seconds.toString().padStart(2, '0');Example: In this example, we use converts 3685 seconds to hh:mm format using JavaScript. It calculates hours, minutes, and seconds individually, then displays the formatted result when the button is clicked.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>convert seconds to time string
format hh:mm:ss using JavaScript
</title>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
JavaScript seconds to time
string with format hh:mm:ss
</b>
<p>No. of secomds is: 3685</p>
<p>
Time in hh:mm:ss is:
<span class="output"></span>
</p>
<button onclick="convertSecondstoTime()">
Get time in hh:mm:ss
</button>
<script type="text/javascript">
function convertSecondstoTime() {
given_seconds = 3685;
hours = Math.floor(given_seconds / 3600);
minutes = Math.floor((given_seconds - (hours * 3600)) / 60);
seconds = given_seconds - (hours * 3600) - (minutes * 60);
timeString = hours.toString().padStart(2, '0') + ':' +
minutes.toString().padStart(2, '0') + ':' +
seconds.toString().padStart(2, '0');
document.querySelector('.output').textContent
= timeString;
}
</script>
</body>
</html>
Output:
Similar Reads
How to convert UTC date time into local date time using JavaScript ? Given an UTC date and the task is to convert UTC date time into local date-time using JavaScript toLocaleString() function. Syntax: var theDate = new Date(Date.parse('DATE_IN_UTC')) theDate.toLocaleString() Example 1: This example converts UTC date time into local date time using JavaScript. html
1 min read
How to Round off Time to Nearest 5 Min using JavaScript? To round off time to the nearest 5 minutes in JavaScript, extract the minutes from a Date object, round them to the nearest multiple of 5, and set the updated time back into the Date object.Below are the approaches to round off time to the nearest 5 minutes:Table of ContentUsing Math.floor() functio
2 min read
How to convert Unix timestamp to time in JavaScript ? In this article, we will see how to convert UNIX timestamps to time. These are the following approaches: Table of Content Using the toUTCString() methodGetting individual hours, minutes, and secondsUsing Intl.DateTimeFormat ObjectUsing the toUTCString() methodAs JavaScript works in milliseconds, it
4 min read
How to Round Time to the Nearest Quarter Hour using JavaScript ? We have given a time and the task is to round the time to the nearest quarter-hour with the help of JavaScript. There are two approaches that are discussed below: Approach 1: Use getMinutes() and getHours() methods to get the minutes and hours in a variable (Ex. mins, hrs) add the 7.5 to mins, divid
3 min read
How to remove time from date using JavaScript ? Given a Date Object and the task is to remove the time portion from the object using JavaScript. JavaScript split() Method: This method is used to split a string into an array of substrings, and returns the new array. Syntax: string.split( separator, limit ) Parameters: separator: This parameter is
2 min read
JavaScript Program to Convert Milliseconds to Seconds Milliseconds and Seconds are important time units for planning schedules and managing daily activities and performance optimizations. Understanding this conversion helps in better time management. // Formula to convert millisecond into second: 1 millisecond = 1 / 1000 second Below are the approaches
2 min read