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

Table of Content

Passing the seconds to a date object
Calculating the hours, minutes, and seconds individually

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>