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>
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:
SessionTime to SessionTimeInSec and divide numbers by 1000.SessionTimeInSec by 1000 for the arguments passed to both funtions setInterval and setTimeout.tickDuration since it will equal to one. Consonantly, change SessionTime = SessionTime - tickDuration to SessionTimeInSec--.$(#timr) text to 0:0 in SessionExpireEvent()Seems like you want something like this:
var mins = Math.floor(SessionTime / 1000 / 60);
SessionTime %= 60000;
var secs = SessionTime / 1000;
$("#timr").text(mins + ":" + secs);