Skip to content
Related Articles

Related Articles

Improve Article

Convert minutes to hours/minutes with the help of JQuery

  • Last Updated : 31 Dec, 2019

The task is to convert the given minutes to Hours/Minutes format with the help of JavaScript. Here, 2 approaches are discussed.
Approach 1:

  • Get the input from user.
  • Use Math.floor() method to get the floor value of hours from minutes.
  • Use % operator to get the minutes.

Example 1: This example implements the above approach.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Convert minutes to hours/minutes with the help of JQuery.
    </title>
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
    Type Minutes:
    <input class="mins" />
    <br>
    <br>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        var element = document.getElementById("body");
        up.innerHTML =
"Click on the button to get minutes in Hours/Minutes format.";
  
        function GFG_Fun() {
            // Getting the input from user.
            var total = $('.mins').val();
            // Getting the hours.   
            var hrs = Math.floor(total / 60);
            // Getting the minutes.
            var min = total % 60;
            $('#GFG_DOWN').html(hrs + 
                       " Hours and " + min + " Minutes");
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Approach 2:

  • Get the input from user.
  • Use Math.floor() method to get the floor value of hours from minutes.
  • Use % operator to get the minutes.
  • check if the hours are less then 10 then append a zero before the hours.
  • check it for minutes also, if the minutes are less then 10 then append a zero before the minutes.

Example 2: This example implements the above approach.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Convert minutes to hours/minutes with the help of JQuery.
    </title>
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
    Type Minutes:
    <input class="mins" />
    <br>
    <br>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        var element = document.getElementById("body");
        up.innerHTML = 
"Click on the button to get minutes in Hours/Minutes format.";
  
        function conversion(mins) {
            // getting the hours.
            let hrs = Math.floor(mins / 60); 
            // getting the minutes.
            let min = mins % 60; 
            // formatting the hours.
            hrs = hrs < 10 ? '0' + hrs : hrs; 
            // formatting the minutes.
            min = min < 10 ? '0' + min : min; 
            // returning them as a string.
          return `${hrs}:${min}`; 
        }
  
        function GFG_Fun() {
            var total = $('.mins').val();
            $('#GFG_DOWN').html(conversion(total));
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :