Readable counter time-CodePudding

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>

CodePudding user response：

You can simply replace

$("#timr").text(SessionTime);

with

$("#timr").text(`${Math.floor(SessionTime/60000)}:${SessionTime/1000`}`);

However, your code can be simpler if you don't need to know how much time is left to milliseconds precision.

setInterval and setTimeout are the only functions in your code that need their arguments in 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 SessionTimeInSec = 40;
    
    var myInterval = setInterval(function() {
      SessionTimeInSec--;
      $("#timr").text(`${Math.floor(SessionTimeInSec/60)}:${SessionTimeInSec`}`);
    }, 1000);
    
    
    var myTimeOut = setTimeout(SessionExpireEvent, SessionTimeInSec*1000);
    
    $("input").click(function() {
      clearTimeout(myTimeOut);
      SessionTimeInSec = 40;
      myTimeOut = setTimeout(SessionExpireEvent, SessionTimeInSec*1000);
    });

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

</html>

I did the following changes:

Change SessionTime to SessionTimeInSec and divide numbers by 1000.
Multiple SessionTimeInSec by 1000 for the arguments passed to both funtions setInterval and setTimeout.
Get rid of tickDuration since it will equal to one. Consonantly, change SessionTime = SessionTime - tickDuration to SessionTimeInSec--.
Change $(#timr) text to 0:0 in SessionExpireEvent()

CodePudding user response：

Seems like you want something like this:

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

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

CodePudding user response：

Check this answer => https://stackoverflow.com/a/21294619/11523633

You can copy the millisToMinutesAndSeconds() function to your script and call it in myInterval.

Example:

function millisToMinutesAndSeconds(millis) {
  var minutes = Math.floor(millis / 60000);
  var seconds = ((millis % 60000) / 1000).toFixed(0);
  return seconds == 60
    ? minutes   1   ":00"
    : minutes   ":"   (seconds < 10 ? "0" : "")   seconds;
}

var myInterval = setInterval(function () {
  SessionTime = SessionTime - tickDuration;
  $("#timr").text(millisToMinutesAndSeconds(SessionTime));
}, 1000);