Dinada, aqui está o código que fiz nessa última meia hora para caso o usuário troque de página e pense que assim parará a contagem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<title>Cronômetro</title>
</head>
<body>
<main>
<h2 style="display:none">Tempo de acesso restante: <span id="tempo-restante"> 1800</span> </h2>
<h2> Tempo de acesso restante: <span id="tempo-restante-mostrador">00:30:00</span> </h2>
<nav class="botao-selecao">
<ul>
<li> <button id="botaoStart" name="botao" class="botoes">Start</button> </li>
<li> <button name="botao2" onclick="freeze();" class="botoes2">Stop</button> </li>
<li> <button id="reset" onclick="reset(1800);">Reset</button> </li>
</ul>
</nav>
</main>
<script>
localStorage.setItem("freeze","false");
if ( document.getElementById("tempo-restante").innerText*1<=0){
document.getElementById("reset").click();
window.location = 'home.php';
}
function freeze(){
localStorage.setItem("freeze","true");
}
function play(){
localStorage.setItem("freeze","false");
}
function reset(tempoInicial){
localStorage.setItem("tempo-restante",tempoInicial);
$("#tempo-restante").text(tempoInicial);
$("#tempo-restante-mostrador").text(formatahhmmss(tempoInicial));
return tempoRestante=tempoInicial;
}
tempoRestante=localStorage.getItem("tempo-restante");
if (tempoRestante=="" || tempoRestante==0 || tempoRestante==-1){
tempoRestante=document.getElementById("tempo-restante").innerText*1;
} else {
tempoRestante=tempoRestante*1;
}
document.getElementById("tempo-restante").innerText=tempoRestante;
var ultimoAno= localStorage.getItem("ultimoAno");
var ultimoMes=localStorage.getItem("ultimoMes");
var ultimoDia=localStorage.getItem("ultimoDia");
var ultimoHora=localStorage.getItem("ultimoHora");
var ultimoMinuto=localStorage.getItem("ultimoMinuto");
var ultimoSegundo=localStorage.getItem("ultimoSegundo");
var ultimaDataCalculo=new Date(ultimoAno,ultimoMes,ultimoDia,ultimoHora,ultimoMinuto,ultimoSegundo);
var DataAtual = new Date();
var quantoFalta=Math.round((DataAtual-ultimaDataCalculo)/1000);
document.getElementById("tempo-restante").innerText=document.getElementById("tempo-restante").innerText*1-quantoFalta;
document.getElementById("tempo-restante-mostrador").innerText=formatahhmmss(tempoRestante);
function formatahhmmss(s) {
var date = new Date(null);
date.setSeconds(s); // specify value for SECONDS here
return date.toISOString().substr(11, 8);
}
var botoes = $(".botoes");
var tempoRestante = $("#tempo-restante").text()*1;
botoes.one("click", function () {
botoes.one("click", "");
document.getElementById("botaoStart").setAttribute("onclick","play();");
var cronometroID = setInterval(function () {
if (localStorage.getItem("freeze")=="false"){
tempoRestante--;
}
$("#tempo-restante").text(tempoRestante);
$("#tempo-restante-mostrador").text(formatahhmmss(tempoRestante));
localStorage.setItem("tempo-restante",tempoRestante);
var ultimaData = new Date();
localStorage.setItem("ultimoAno",ultimaData.getFullYear());
localStorage.setItem("ultimoMes",ultimaData.getMonth());
localStorage.setItem("ultimoDia",ultimaData.getDate());
localStorage.setItem("ultimoHora",ultimaData.getHours());
localStorage.setItem("ultimoMinuto",ultimaData.getMinutes());
localStorage.setItem("ultimoSegundo",ultimaData.getSeconds());
if (tempoRestante < 1) {
clearInterval(cronometroID);
document.getElementById("reset").click();
window.location = 'home.php';
}
}, 1000);
});
document.getElementById("botaoStart").click();
</script>
</body>
</html>
