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

Imágen de perfil

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


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 07 de Octubre del 2014 por Xavi
2.804 visualizaciones desde el 07 de Octubre del 2014. Una media de 28 por semana
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.

Versión 1
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 07 de Octubre del 2014gráfica de visualizaciones de la versión: Versión 1
2.805 visualizaciones desde el 07 de Octubre del 2014. Una media de 28 por semana
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 (2)

Imágen de perfil
xve
08 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

Comentar la versión: Versión 1

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

http://lwp-l.com/s2779