'Readable counter time

My script is working well, but the only problem i have.

i want to show the counter in human readable style, becouse now its showing in milliseconds

i want like time left is 1:02 Minutes

so i want to display time left in readable style in browser not milliseconds

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>

  
  <p>Time left: <span id="timr"></span></p>
  <p id="hpd">Welcome here john</p>
  <p id="shp" style="display:none">Your time is up</p>
<input type="button" value="Hi john" id="btn">
<script>
var SessionTime=100000;
var tickDuration=1000;
var myInterval=setInterval(function(){
    SessionTime=SessionTime-tickDuration
$("#timr").text(SessionTime);
},1000);
var myTimeOut=setTimeout(SessionExpireEvent,SessionTime);
$("input").click(function(){
clearTimeout(myTimeOut);
    SessionTime=100000;
 myTimeOut=setTimeout(SessionExpireEvent,SessionTime);
});

function SessionExpireEvent()
{ clearInterval(myInterval);
    
    $("#btn").attr("disabled", true);
    $("#hpd").hide();
    $("#shp").show();
}
</script>
</body>
</html>


Solution 1:[1]

Seems like you want something like this:

var mins = Math.floor(SessionTime / 1000 / 60);
SessionTime %= 60000;
var secs = SessionTime / 1000;

$("#timr").text(mins + ":" + secs);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1