Readable counter time

Question

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>

ControlAltDel · Answer 1 · 2022-01-26T12:54:22.053

0

Seems like you want something like this:

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

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

edited Jan 26 '22 at 12:54

answered Jan 26 '22 at 12:27

ControlAltDel

33,923
10
53
80

this is not working, because the ouput is Time left: 1.6666666666666667:100 – Joe Mike Jan 26 '22 at 12:46
it shows Time left: 1:100 now, but not counting, it would be good and provide the full working code, coz my coding maybe different from urs – Joe Mike Jan 26 '22 at 13:11

M. Selim · Accepted Answer · 2022-01-26T14:54:52.233

You can simply replace

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

with

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

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%60}`);
    }, 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()

You are welcome. I understand that this for learning purposes; however, in this use case the logic could have been written differently to be more intuitive. I will add it to my answer in case you are interested. — M. Selim, Jan 26 '22 at 14:33

Readable counter time

2 Answers2