0

gracias a la ayuda de algunos en el foro logré modificar un poco este cronometro, cuando esta avanzando y refresco la pagina al recargar sigue la cuenta donde se quedó y si está parado al refrescar la pagina se popula de vuelta el tiempo donde se quedó, pero cuando cierro la pagína y la dejo cerrada por un rato la cuenta no sigue sino hasta que abro de nuevo la pagina, si el cronometro está "activo" hay una manera de que siga contando aunque la pestaña esté cerrada? el código es el siguiente, agregué un eventListener para que ejecute la misma funcion antes de cerrar la pestaña que cuando se recarga, hasta ahora lo único que hace es guardar el dato cuando cierro la pestaña solo cuenta hasta que la vuelvo a abrir.

 <!DOCTYPE html> 
  <html>
  <head>
  <script> 
  var h, m, s;
  var runT;
  var islog;

   window.addEventListener("onbeforeunload", function() {
   if (localStorage.getItem("sT") === null) {      
     s=0;
    }
    else{      
     s= localStorage.getItem('sT');
    }
   if (localStorage.getItem("mT") === null) {      
     m=0;
    }
    else{      
     m= localStorage.getItem('mT');
    }
   if (localStorage.getItem("hT") === null) {      
     h=0;
    }
    else{      
     h= localStorage.getItem('hT');
    }
    if (localStorage.getItem("islog") === null) {
      writeT();
    }
    else {
    startT2();
    }
     document.getElementsByTagName("input")[1].value="Reset";
     } );

   window.onload = function() {
   if (localStorage.getItem("sT") === null) {      
     s=0;
    }
    else{      
     s= localStorage.getItem('sT');
    }
   if (localStorage.getItem("mT") === null) {      
    m=0;
     }
    else{      
     m= localStorage.getItem('mT');
    }
    if (localStorage.getItem("hT") === null) {      
     h=0;
     }
      else{      
      h= localStorage.getItem('hT');
    }
    if (localStorage.getItem("islog") === null) {
      writeT();
      }
     else {
    startT2();
    }
    document.getElementsByTagName("input")[1].value="Reset";
   } 
   function startT() {
  document.getElementsByTagName("input")[0].setAttribute("onclick", 
   "pauseT()");
   islog = true;
   localStorage.setItem("islog",islog);
   runT = setInterval(countT, 1000);  
  }
  function startT2() {
   document.getElementsByTagName("input")[0].setAttribute("onclick", 
"pauseT()");
   runT = setInterval(countT, 1000);  
  }
  function countT() {
   s++;
   writeT();
  }
  function pauseT() {
   clearInterval(runT);
   document.getElementsByTagName("input")[0].setAttribute("onclick", 
  "startT()");
       localStorage.removeItem("islog");
   
  }
   function resetT() {
      clearInterval(runT);
       document.getElementsByTagName("input")[0].setAttribute("onclick", 
    "startT()");
     localStorage.removeItem("islog");
     localStorage.removeItem("sT");
     localStorage.removeItem("mT");
     localStorage.removeItem("hT");


  document.getElementsByTagName("input")[0].value="00:00:00";
   s=0;m=0;h=0;
   }
  function writeT() {
    var hAux, mAux, sAux;
  if (s>59){m++;s=0;}
  if (m>59){h++;m=0;}
  if (h>24){h=0;}
  if (s<10){sAux="0"+s;}else{sAux=s;}
  if (m<10){mAux="0"+m;}else{mAux=m;}
  if (h<10){hAux="0"+h;}else{hAux=h;}


    document.getElementsByTagName("input")[0].value = hAux + ":" + mAux + ":" + sAux; 
   localStorage.setItem('sT', s);
    localStorage.setItem('mT', m);
    localStorage.setItem('hT', h);
   }
 </script>
</head>
<body>
 <input type="button" onclick="startT()" >
 <input type="button" onclick="resetT()" >
</body>
</html>
3
  • 1
    Podrías agregar la parte del html para poder trabajar sobre lo que ya tienes hecho, por otra parte, sería de escuchar los eventos cuando se cierra e inicia la página, en vez de iniciar a 0, ir a tomar los datos del localStorage.
    – Lud Osorio
    Commented el 5 ago. 2020 a las 4:40
  • 1
    Agrega el código en la pregunta, haciendo clic en editar. Commented el 5 ago. 2020 a las 8:12
  • 1
    Todo el Código que estoy utilizando está arriba en la pregunta.
    – BillyLopez
    Commented el 5 ago. 2020 a las 14:19

2 respuestas 2

0

Asumiendo que ya entiendes como funciona la estructura que se suele usar para cronometros, hay muchos ejemplos de como hacer uno, vamos con donde poner el local storage para que si encuentra algo guardado lo use de valor inicial

<html>
<head>
<script> 

Inicializas las variables del tiempo y setInterval

  var h, m, s;
  var runT;

al inicio preguntas si hay guardado algo en el local storage, si es así tomas ese valor como inicial, y eso sería todo para obtener los datos guardados del local storage.

  window.onload = function() {
   clearInterval(runT);
   if (localStorage.getItem("sT") === null) {      
     s=0;
    }
    else{      
     s= localStorage.getItem('sT');
    }
   if (localStorage.getItem("mT") === null) {      
     m=0;
    }
    else{      
     m= localStorage.getItem('mT');
    }
   if (localStorage.getItem("hT") === null) {      
     h=0;
    }
    else{      
     h= localStorage.getItem('hT');
    }

y escribes el tiempo

   writeT();

aqui solo le pongo nombre al boton de reset

  document.getElementsByTagName("input")[1].value="Reset";
  } 

cuando haces click llama a esta funcion que invoca al setInterval, en este caso le puse 1000=1segundo al mismo tiempo conviertes el boton de start en el de pausa y escribes el tiempo

      function startT() {


document.getElementsByTagName("input")[0].setAttribute("onclick", "pauseT()");
   runT = setInterval(countT, 1000);   
  }
      function countT() {

aqui solo sumo 1, pero puedes aplicar la logica de usar la hora actual

       s++;
       writeT();
      }

para pausar el cronometro solo limpias el Intervalo y remueves las variables del local storage para que en la recarga de la pagina no lo encuentre y le asigne los 0 Y a la vez haces el cambio para que el boton funcione como el de inicio

  function pauseT() {
   clearInterval(runT);


document.getElementsByTagName("input")[0].setAttribute("onclick", "startT()");
       localStorage.removeItem("sT");
       localStorage.removeItem("mT");
       localStorage.removeItem("hT");
      }

el boton de reset solo limpia todo y se reinicia el contador, a la vez que habilita el otro boton para comenzar a contar

  function resetT() {
   clearInterval(runT);

document.getElementsByTagName("input")[0].setAttribute("onclick", "startT()");
   localStorage.removeItem("sT");
   localStorage.removeItem("mT");
   localStorage.removeItem("hT");


document.getElementsByTagName("input")[0].value="00:00:00";
   s=0;m=0;h=0;
      }

y esta es la funcion que es llamada para escribir el tiempo y donde se va a guardar las variables en localStorage

  function writeT() {
   var hAux, mAux, sAux;
  if (s>59){m++;s=0;}
  if (m>59){h++;m=0;}
  if (h>24){h=0;}
  if (s<10){sAux="0"+s;}else{sAux=s;}
  if (m<10){mAux="0"+m;}else{mAux=m;}
  if (h<10){hAux="0"+h;}else{hAux=h;}


document.getElementsByTagName("input")[0].value = hAux + ":" + mAux + ":" + sAux; 
  localStorage.setItem('sT', s);
  localStorage.setItem('mT', m);
  localStorage.setItem('hT', h);
  }
 </script>
</head>
<body>
 <input type="button" onclick="startT()" >
 <input type="button" onclick="resetT()" >
</body>
</html>

Si quieres que al iniciar te considere el tiempo que estuvo fuera, desconozco una forma que el contador siga funcionando en off, pero una forma de calcularlo es guardar el Time del cronometro y al iniciar calculas la diferencia de tiempo con el actual y lo agregas al valor inicial, así; -es el mismo ejemplo que puse con los cambios y unos ajustes por ajustes de formato cuando trabajas con localStorage y numéricos.

<html>
<head>
 <script> 
  var h, m, s;
  var runT;
  window.onload = function() {
   clearInterval(runT);
   if (localStorage.getItem("sT") === null) {      
        s=0;
        }
        else{      
        s= Number(localStorage.getItem("sT"));
    
        }
   if (localStorage.getItem("mT") === null) {      
        m=0;
        }
         else{      
        m= Number(localStorage.getItem('mT'));
        }
   if (localStorage.getItem("hT") === null) {      
        h=0;
        }
        else{      
         h= Number(localStorage.getItem('hT'));
        }
   if (localStorage.getItem("offT") !== null) {      
        var oldTime=localStorage.getItem('offT');
        var difT = Math.round(((new Date()).getTime() - oldTime)/1000);
        var s2=0, m2=0, h2=0;
        h2=Math.round(difT/3600);
        m2=Math.round((difT%3600)/60);
        s2=Math.round((difT%3600)%60);
        h+=h2; 
        m+=m2;  
        s+=s2;
        }               
                   
    writeT();

document.getElementsByTagName("input")[1].value="Reset"; 
 
  } 
  function startT() {

document.getElementsByTagName("input")[0].setAttribute("onclick", "pauseT()");
   runT = setInterval(countT, 1000);   
  }     
  function countT() {
  s++;
  writeT();
  } 
  function pauseT() {
   clearInterval(runT);


document.getElementsByTagName("input")[0].setAttribute("onclick", "startT()");
   localStorage.removeItem("sT");
   localStorage.removeItem("mT");
   localStorage.removeItem("hT");
   localStorage.removeItem("offT");
  }
  function resetT() {
   clearInterval(runT);

document.getElementsByTagName("input")[0].setAttribute("onclick", "startT()");
   localStorage.removeItem("sT");
   localStorage.removeItem("mT");
   localStorage.removeItem("hT");
   localStorage.removeItem("offT");

document.getElementsByTagName("input")[0].value="00:00:00";
   s=0;m=0;h=0;
  }
  function writeT() {
   var hAux, mAux, sAux;
  if (s>59){m++;s=0;}
  if (m>59){h++;m=0;}
  if (h>24){h=0;}
  if (s<10){sAux="0"+s;}else{sAux=s;}
  if (m<10){mAux="0"+m;}else{mAux=m;}
  if (h<10){hAux="0"+h;}else{hAux=h;}
  document.getElementsByTagName("input")[0].value = hAux + ":" + mAux + ":" + sAux; 
  if (s+h+m) {
  localStorage.setItem('sT', s);
  localStorage.setItem('mT', m);
  localStorage.setItem('hT', h);
  localStorage.setItem('offT', (new Date()).getTime());
  }
  }

 </script>
</head>
<body>
 <input type="button" onclick="startT()" >
 <input type="button" onclick="resetT()" >
</body>
</html>
6
  • Gracias Angel, solamente me queda la duda de como hacer que la cuenta no se borre al recargar la pagina, con el código del ejemplo que me das, se elimina el localStorage cada que reinicio la pagina, puede eso solucionarse de algún modo?
    – BillyLopez
    Commented el 5 ago. 2020 a las 22:23
  • @BillyLopez te funciona el ejemplo que puse?, se me pasó pero puedes revisar si tu navegador soporta storage con typeof(Storage), y corregí el codigo que puse de ejemplo, estaba declarando las variables h, m, s en varios lugares y al iniciar salía undefined, lo he probado chrome Chrome/84.0.4147.89 Mobile abriendo y cerrando la pestaña y al iniciar me pone la cuenta en que se quedó.
    – Ange Reyna
    Commented el 6 ago. 2020 a las 0:24
  • me funcionó perfecto. Gracias me ayudó mucho entender la logica que usaste, es un poco diferente a la que tenia, pero funciona igual. Saludines!
    – BillyLopez
    Commented el 6 ago. 2020 a las 3:36
  • estuve haciendo algunas pruebas y he modificado la pregunta quizá puedas ayudarme.
    – BillyLopez
    Commented el 6 ago. 2020 a las 14:49
  • Desconozco una forma que siga trabajando despues de cerrar la pagina pero puedes calcular la diferencia de tiempo del contador con el tiempo que abre de nuevo la pagina, edité la respuesta con los ajustes.
    – Ange Reyna
    Commented el 6 ago. 2020 a las 19:50
0

Le he agregado mas funcionalidad como que cuando está parado y sales y regresas de la pagina el dato sigue alli, y que cuando regresas y esta avtivo empieza a contar solo sin necesidad de darle click de nuevo para que inicie

     <!DOCTYPE html> 
   <html>
   <head>
    <script> 
   var h, m, s;
   var runT;
   window.onload = function() {
     clearInterval(runT);
     localStorage.getItem('islog');
     if (localStorage.getItem("sT") === null) {      
    s=0;
    }
    else{      
    s= Number(localStorage.getItem("sT"));

    }
   if (localStorage.getItem("mT") === null) {      
    m=0;
    }
     else{      
    m= Number(localStorage.getItem('mT'));
    }
    if (localStorage.getItem("hT") === null) {      
    h=0;
    }
    else{      
     h= Number(localStorage.getItem('hT'));
    }
    if (localStorage.getItem("offT") !== null && localStorage.getItem('islog')!=null) {      
    var oldTime=localStorage.getItem('offT');
    var difT = Math.round(((new Date()).getTime() - oldTime)/1000);
    var s2=0, m2=0, h2=0;
    h2=Math.round(difT/3600);
    m2=Math.round((difT%3600)/60);
    s2=Math.round((difT%3600)%60);
    h+=h2; 
    m+=m2;  
    s+=s2;
    clearInterval(runT);
    runT = setInterval(countT, 1000)
    islog = true;
    localStorage.setItem("islog",islog);
     document.getElementsByTagName("input")[0].setAttribute("onclick", "pauseT()")
        }               
               
     writeT();

    document.getElementsByTagName("input")[1].value="Reset"; 

     } 
      function startT() {

   document.getElementsByTagName("input")[0].setAttribute("onclick", "pauseT()");
     runT = setInterval(countT, 1000);   
      islog = true;
     localStorage.setItem("islog",islog);
   }     
    function countT() {
    s++;
    writeT();
    } 
     function pauseT() {
    clearInterval(runT);
   document.getElementsByTagName("input")[0].setAttribute("onclick", "startT()");

     localStorage.removeItem("islog");
       }
     function resetT() {
    clearInterval(runT);

   document.getElementsByTagName("input")[0].setAttribute("onclick", "startT()");
    localStorage.removeItem("sT");
      localStorage.removeItem("mT");
      localStorage.removeItem("hT");
      localStorage.removeItem("offT");
     localStorage.removeItem("islog");
     document.getElementsByTagName("input")[0].value="00:00:00";
     s=0;m=0;h=0;
     }
      function writeT() {
     var hAux, mAux, sAux;
   if (s>59){m++;s=0;}
   if (m>59){h++;m=0;}
      if (h>24){h=0;}
    if (s<10){sAux="0"+s;}else{sAux=s;}
    if (m<10){mAux="0"+m;}else{mAux=m;}
     if (h<10){hAux="0"+h;}else{hAux=h;}
     document.getElementsByTagName("input")[0].value = hAux + ":" + mAux + ":" + sAux; 
    if (s+h+m) {
   localStorage.setItem('sT', s);
    localStorage.setItem('mT', m);
     localStorage.setItem('hT', h);
    localStorage.setItem('offT', (new Date()).getTime());
   }
  }

    </script>
   </head>
   <body>
     <input type="button" onclick="startT()" >
    <input type="button" onclick="resetT()" >
    </body>
   </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.