Mi script funciona bien, pero el único problema que tengo.
quiero mostrar el contador en un estilo legible por humanos, porque ahora se muestra en milisegundos
quiero que el tiempo restante sea 1:02 Minutos
entonces quiero mostrar el tiempo restante en un estilo legible en el navegador, no en milisegundos
<!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>Simplemente puede reemplazar
$("#timr").text(SessionTime);con
$("#timr").text(`${Math.floor(SessionTime/60000)}:${SessionTime/1000%60}`);Sin embargo , su código puede ser más simple si no necesita saber cuánto tiempo le queda con una precisión de milisegundos.
setInterval y setTimeout son las únicas funciones en su código que necesitan sus argumentos en milisegundos.
<!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>Hice los siguientes cambios:
SessionTime a SessionTimeInSec y divida los números por 1000.SessionTimeInSec por 1000 para los argumentos pasados a ambas funciones setInterval y setTimeout .tickDuration ya que será igual a uno. De manera consonante, cambie SessionTime = SessionTime - tickDuration a SessionTimeInSec-- .$(#timr) a 0:0 en SessionExpireEvent()Parece que quieres algo como esto:
var mins = Math.floor(SessionTime / 1000 / 60); SessionTime %= 60000; var secs = SessionTime / 1000; $("#timr").text(mins + ":" + secs);