Código de JavaScript - Cronometro que continua aunque se cierre el navegador

Imágen de perfil
Val: 1.807
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cronometro que continua aunque se cierre el navegadorgráfica de visualizaciones


JavaScript

Actualizado el 23 de Febrero del 2021 por Xavi (548 códigos) (Publicado el 7 de Octubre del 2014)
22.689 visualizaciones desde el 7 de Octubre del 2014
Una vez iniciado el cronometro, puedes actualizar la página, cerrar el navegador, incluso el ordenador... pero este cronometro seguirá funcionando, ya que guarda la fecha inicial en la base de datos del navegador, lo que permite cerrar el navegador y que cuando volvamos el cronometro siga funcionando.

cronometro-javascript-base-de-datos-navegador



He creado una nueva versión con PHP que el cronometro nunca se detiene y es el mismo cronometro para todos los usuarios: Cronometro compartido entre varios usuarios que no se reinicia nunca

Versión 1
estrellaestrellaestrellaestrellaestrella(10)

Publicado el 7 de Octubre del 2014gráfica de visualizaciones de la versión: Versión 1
22.690 visualizaciones desde el 7 de Octubre del 2014
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
 
    <script>
    var inicio=0;
    var timeout=0;
 
    function empezarDetener(elemento)
    {
        if(timeout==0)
        {
            // empezar el cronometro
 
            elemento.value="Detener";
 
            // Obtenemos el valor actual
            inicio=new Date().getTime();
 
            // Guardamos el valor inicial en la base de datos del navegador
            localStorage.setItem("inicio",inicio);
 
            // iniciamos el proceso
            funcionando();
        }else{
            // detemer el cronometro
 
            elemento.value="Empezar";
            clearTimeout(timeout);
 
            // Eliminamos el valor inicial guardado
            localStorage.removeItem("inicio");
            timeout=0;
        }
    }
 
    function funcionando()
    {
        // obteneos la fecha actual
        var actual = new Date().getTime();
 
        // obtenemos la diferencia entre la fecha actual y la de inicio
        var diff=new Date(actual-inicio);
 
        // mostramos la diferencia entre la fecha actual y la inicial
        var result=LeadingZero(diff.getUTCHours())+":"+LeadingZero(diff.getUTCMinutes())+":"+LeadingZero(diff.getUTCSeconds());
        document.getElementById('crono').innerHTML = result;
 
        // Indicamos que se ejecute esta función nuevamente dentro de 1 segundo
        timeout=setTimeout("funcionando()",1000);
    }
 
    /* Funcion que pone un 0 delante de un valor si es necesario */
    function LeadingZero(Time)
    {
        return (Time < 10) ? "0" + Time : + Time;
    }
 
    window.onload=function()
    {
        if(localStorage.getItem("inicio")!=null)
        {
            // Si al iniciar el navegador, la variable inicio que se guarda
            // en la base de datos del navegador tiene valor, cargamos el valor
            // y iniciamos el proceso.
            inicio=localStorage.getItem("inicio");
            document.getElementById("boton").value="Detener";
            funcionando();
        }
    }
    </script>
 
    <style>
    .crono_wrapper {text-align:center;width:200px;}
    </style>
</head>
 
<body>
 
<div class="crono_wrapper">
    <h2 id='crono'>00:00:00</h2>
    <input type="button" value="Empezar" id="boton" onclick="empezarDetener(this);">
</div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (10)

Imágen de perfil
8 de Octubre del 2014
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Damian
28 de Octubre del 2014
estrellaestrellaestrellaestrellaestrella
Desde php cómo podría guardar el valor que tiene ese id='crono' en el momento que el usuario apreta un bóton determinado.
Por ejemplo selecciona el botón 'Abandonar' y el cronómetro marca 00:01:20, lo que quiero obtener es ese tiempo para luego guardarlo en un campo de la base de datos de MySQL. No se si sería de tipo datetime, sólo quiero guardar 00:01:20 pero no la fecha.
Responder
18 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
Hola buenas, tengo una duda! como podrias poner que se inicie automaticamente sin tener que darle al boton iniciar? y que siga haciendo la misma funcion pero automaticamente y que sea cuenta atras 48:00:00.... se podria hacer?
Responder
Keyr Mercado
21 de Noviembre del 2017
estrellaestrellaestrellaestrellaestrella
Hola, tengo una duda casi no trabajo en javascript pero me gustaria saber como hago un boton que pueda pausar el tiempo y renaudar al precionar asi mismo. Gracias!
Responder
greicy
5 de Enero del 2021
estrellaestrellaestrellaestrellaestrella
Hola tengo una consulta en mi caso yo no lo estoy ocupando como cronometro si no como el tiempo limite para un examen en linea, el tiempo es de 20 min pero necesito lo mismo de que al momento de recargar no se reinicie :( alguien podría ayudarme Gracias
Responder
Imágen de perfil
6 de Enero del 2021
estrellaestrellaestrellaestrellaestrella
Por mucho que actualices el navegador, NO se reinicia el contador... siempre continua...
Responder
greicy
8 de Enero del 2021
estrellaestrellaestrellaestrellaestrella
Correcto, su código funciona excelente... pero lo que pasa es que yo no ocupo un botón para iniciar o detener el tiempo ya que quiero que se refleje desde el inicio, en este caso en un label y que este aumente y sin importar cuanto recargue la pagina siga hasta llegar al tiempo limite.
Responder
greicy
8 de Enero del 2021
estrellaestrellaestrellaestrellaestrella
si, en este caso sería una cuenta atrás, y donde tengo problemas es para definirle el tiempo final, es decir que llegue hasta cierto punto y se detenga, si me puedes ayudar te lo agradecería mucho
gracias
Responder
19 de Febrero del 2021
estrellaestrellaestrellaestrellaestrella
Vale está perfecto pero ... y si queremos que no pare aunque entremos desde otro dispositivo, es posible?
Que el cronómetro esté siempre funcionando
Responder
Imágen de perfil
5 de Enero del 2024
estrellaestrellaestrellaestrellaestrella
Manejar un Lenguaje partiendo de sus orígenes, es sinónimo de conocimiento del mismo. Hoy día más que nunca ó siempre...

Gracias por compartir conocimientos.

Un saludo
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2779