Código de JavaScript - Cronometro compartido entre varios usuarios que no se reinicia nunca

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

Cronometro compartido entre varios usuarios que no se reinicia nuncagráfica de visualizaciones


JavaScript

Actualizado el 24 de Febrero del 2021 por Xavi (542 códigos) (Publicado el 23 de Febrero del 2021)
336 visualizaciones desde el 23 de Febrero del 2021
Este código de ejemplo, es un cronometro, el cual guarda en el servidor en un archivo de texto la hora inicial, por lo que todos los usuarios que se conecten a la pagina web, todo verán el mismo cronometro, y no se reiniciara aunque se cierre el navegador.

La única manera de reiniciarlo, es pulsando el botón "Reiniciar cronometro" (esta botón solo tiene que estar en una pagina aparte a la de los usuarios), y mediante AJAX, actualiza la hora del archivo de texto en el servidor y empieza el contador de 0.
Para este ejemplo, en el servidor hay que dispones de PHP.

cronometro-que-no-finaliza-nunca


Este código es una variante del código: Cronometro que continua aunque se cierre el navegador que utiliza la base de datos del navegador, y solo es para un usuario/navegador.

Requerimientos

PHP en el servidor

Versión 1

Actualizado el 24 de Febrero del 2021 (Publicado el 23 de Febrero del 2021)gráfica de visualizaciones de la versión: Versión 1
336 visualizaciones desde el 23 de Febrero del 2021
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<?php
$file="hora.txt";
 
/**
 * Funcion que devuelve la fecha guardada en el archivo de texto
 * Si no existe, lo crea con al fecha actual
 *
 * @return string date
 */
function getFileContent() {
    global $file;
    return (file_exists($file)) ? file_get_contents($file) : saveFileContent();
}
 
/**
 * Funcion que guarda la fecha actual en el archivo de texto
 * El formato del archivo es "YYYY-MM-DD HH:MM:SS"
 *
 * @return string date
 */
function saveFileContent() {
    global $file;
 
    $text=date("Y-m-d H:i:s");
    file_put_contents($file, $text);
    return $text;
}
 
/**
 * Cuando desde javascript mediante AJAX se solicita que se reinicie
 * la fecha, se ejecuta esta condicion y devuelve la nueva fecha para
 * reiniciar el contador.
 */
if (isset($_POST["option"]) && $_POST["option"]=="reset") {
    echo json_encode(array("data"=>saveFileContent()));
    return;
}
?>
<!DOCTYPE html>
<html>
<head>
    <style>
    #timer {
        font-size:54px;
        font-family:Arial;
    }
    .wrapper {
        display:inline-block;
        text-align:center;
    }
    </style>
</head>
 
<body>
    <div class="wrapper">
        <div id="timer"></div>
        <input type="button" id="reset" value="reiniciar cronometro">
    </div>
</body>
</html>
 
<script>
// la variable dateServer tiene la fecha guardada en el servidor
let dateServer=new Date("<?php echo getFileContent();?>");
const timer=document.getElementById("timer");
 
/**
 * Funcion que muestra la hora con el formato deseado
 * Recibe segundos y devuelve dias : horas : minutos : segundos
 *
 * @param int s - recibe la cantidad de segundos
 *
 * @return string
 */
const formatoDuracion = s => {
    const time = [
        Math.floor(s / 86400),
        Math.floor(s / 3600) % 24,
        Math.floor(s / 60) % 60,
        Math.floor(s / 1) % 60,
    ];
    return time.map((el, i) => i>0 ? ("0"+el).substr(-2) : el).join(" : ");
}
 
/**
 * Evento que se ejecuta al pulsar el boton para actualizar la fecha
 * en el servidor mediante AJAX
 */
document.getElementById("reset").addEventListener("click", () => {
    var formData = new FormData();
    formData.append('option', "reset");
 
    const options = {
        method: 'POST',
        body: formData,
    }
 
    fetch(window.location.href, options)
        .then(res => res.json())
        .then(res => dateServer=new Date(res.data));
});
 
/**
 * Interval que se ejecuta cada segundo y muestra la diferencia de la
 * fecha guardada en el servidor con la fecha actual
 */
setInterval(() => {
    const DateDiff=new Date()-dateServer;
    timer.innerHTML=formatoDuracion(parseInt(DateDiff/1000));
}, 1000);
</script>



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


No hay comentarios
 

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/s6903