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

Pos: 5

Val: 1.807

Ha mantenido su posición en JavaScript (en relación al último mes)

Cronometro compartido entre varios usuarios que no se reinicia nunca

JavaScript

(4)

Publicado el 23 de Febrero del 2021 por Xavi (548 códigos)

4.052 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
(4)

Publicado el 23 de Febrero del 2021

gráfica de visualizaciones de la versión: Versión 1

4.053 visualizaciones desde el 23 de Febrero del 2021

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 (4)

ScriptShow

2 de Marzo del 2021

Saludos,

muy útil y adaptable.

Gracias por el aporte.

Responder

Muriel

21 de Septiembre del 2022

Buenas noches,

Muy buen código, sería posible en vez de un .txt una bbdd, y así poder crear más de un cronómetro en la misma página.
Muchas gracias.

Responder

Muriel

21 de Septiembre del 2022

Buenas noches,

Muy buen código, sería posible en vez de un .txt una bbdd, y así poder crear más de un cronómetro en la misma página.
Muchas gracias.

Responder

adame

8 de Noviembre del 2022

Buenas tardes,

En vez de un txt podria ser una BBDD,
Muchas gracias antemano.

Responder

Comentar la versión: Versión 1

http://lwp-l.com/s6903

Obtener la zona horaria de un usuario

Contador de vueltas

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

Requerimientos

Versión 1(4)

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

Comentar la versión: Versión 1

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

Versión 1
(4)