13

Preciso criar um cronômetro que é iniciado através de um play, mas queria uma solução, que não seja somente por SESSION, para deixá-lo contando mesmo que o cliente feche a janela ou caia sua internet, ou seja, que não seja dependente de cache ou front.

Como fazer isso com PHP, JavaScript e MySQL?

11
  • 1
    Continuar contando até quando? Se a página for reaberta exibe o mesmo cronômetro? Commented 8/05/2015 às 20:18
  • Exatamente! Ele conta até um pause ou stop! Podendo continuar quando pressionar pause e depois play. No entanto, nunca deve parar de contar quando estiver em 'play'.
    – Lollipop
    Commented 8/05/2015 às 20:19
  • Eu salvaria o timestamp no momento que o play é pressionado no banco e faria um cronômetro no front-end, se o usuário pressiona pause, calcula o tempo e salva este em outra tabela do banco. Se o usuário fechar a página e voltar, verifica se já existe um "timer" para ele no banco e trás o valor inicial para o cronômetro do front. Commented 8/05/2015 às 20:21
  • 1
    Se for uma página qualquer em que o usuário não tenha um identificador único sempre, não vejo como isso é possível de ser feito. Ah não ser que o cronômetro não seja individual, mas sim algo relacionado a página, ae basta chamar um ajax no onLoad. Commented 8/05/2015 às 20:23
  • 1
    Pode dar um exemplo como resposta?
    – Lollipop
    Commented 8/05/2015 às 20:33

6 Respostas 6

13
+200

Considerando que o cronômetro deve armazenar a situação atual, proponho a seguinte estrutura:

  • Ao acessar timer.html, uma requisição AJAX para get_timer.php pega o valor do cronômetro e a situação (pausado/rodando);
  • Os botões "Iniciar" e "Pausar" enviam uma requisição AJAX para grava_acao.php que grava o timestamp e a ação atual com base na última ação gravada;
  • Será possível gerar relatórios com os intervalos parados e rodando;

banco de dados

CREATE TABLE `timer` (
    `id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
    `user_id` INT(10) UNSIGNED  NOT NULL,
    `action` VARCHAR(5) NOT NULL,
    `timestamp` INT(10) UNSIGNED NOT NULL,
    PRIMARY KEY(`id`)
);

timer.html

<script src="http://code.jquery.com/jquery.js"></script>
<script>
var format = function(seconds) {
    var tempos = {
        segundos: 60
    ,   minutos: 60
    ,   horas: 24
    ,   dias: ''
    };
    var parts = [], string = '', resto, dias;
    for (var unid in tempos) {
        if (typeof tempos[unid] === 'number') {
            resto = seconds % tempos[unid];
            seconds = (seconds - resto) / tempos[unid];
        } else {
            resto = seconds;
        }
        parts.unshift(resto);
    }
    dias = parts.shift();
    if (dias) {
        string = dias + (dias > 1 ? ' dias ' : ' dia ');
    }
    for (var i = 0; i < 3; i++) {
        parts[i] = ('0' + parts[i]).substr(-2);
    }
    string += parts.join(':');
    return string;
};
$(function(){
    var tempo = 0;
    var interval = 0;
    var timer = function(){
        $('.timer').html(format(++tempo));
    };
    $.post('get_timer.php', function(resp){
        $('button').text(resp.running ? 'Pausar' : 'Iniciar');
        tempo = resp.seconds;
        timer();
        if (resp.running) {
            interval = setInterval(timer, 1000);
        }
    });
    $('button').on('click', function(){
        var btn = this;
        btn.disabled = true;
        $.post('grava_acao.php', function(resp){
            btn.disabled = false;
            $(btn).text(resp.running ? 'Pausar' : 'Iniciar');
            if (resp.running) {
                timer();
                interval = setInterval(timer, 1000);
            } else {
                clearInterval(interval);
            }
        });
    });
});
</script>
<div class="timer">0 segundos</div>
<button>Iniciar</button>

get_timer.php

<?php
// definir no seu código
$pdo = new PDO($dsn, $username, $passwd);
$user_id = 1; // $_SESSION['user_id'];

$params = array(':user' => $user_id);
$stt = $pdo->prepare('SELECT `action`, `timestamp` FROM `timer` WHERE `user_id` = :user ORDER BY `id`');
$stt->execute($params);
$tempos = $stt->fetchAll(PDO::FETCH_ASSOC);
$seconds = 0;
$action = 'pause'; // sempre inicia pausado
foreach ($tempos as $tempo) {
    $action = $tempo['action'];
    switch ($action) {
        case 'start':
            $seconds -= $tempo['timestamp'];
            break;
        case 'pause':
            // para evitar erro se a primeira ação for pause
            if ($seconds !== 0) {
                $seconds += $tempo['timestamp'];
            }
            break;
    }
}
if ($action === 'start') {
    $seconds += time();
}
header('Content-Type: application/json');
echo json_encode(array(
    'seconds' => $seconds,
    'running' => $action === 'start',
));

grava_acao.php

<?php
// definir no seu código
$pdo = new PDO($dsn, $username, $passwd);
$user_id = 1; // $_SESSION['user_id'];

$params = array(':user' => $user_id);
$stt1 = $pdo->prepare('SELECT `action` FROM `timer` WHERE `user_id` = :user ORDER BY `id` DESC LIMIT 1');
$stt1->execute($params);
$newAction = 'start';
if ($stt1->rowCount() && $stt1->fetchColumn() === 'start') {
    $newAction = 'pause';
}
$stt2 = $pdo->prepare('INSERT INTO `timer` (`user_id`, `action`, `timestamp`) VALUES (:user, :action, :time)');
$params[':action'] = $newAction;
$params[':time'] = time();
$stt2->execute($params);
header('Content-Type: application/json');
echo json_encode(array(
   'running' => $newAction === 'start',
)); // para atualizar status, no caso de concorrência
7
  • Esse é o rumo! Deve-se criar uma rotina para avaliar a situação pausado/rodando, para então gerar um cálculo matemático que trará o tempo do intervalo entre o início e o retorno à tela!
    – Lollipop
    Commented 11/05/2015 às 17:28
  • Duas informações: Sempre será uma contagem crescente e quando eu abrir a página, caso eu volte de uma possível queda/fechamento, o cronômetro deve startar/iniciar automaticamente! Mas você entrou no caminho mais correto que todos, até agora!
    – Lollipop
    Commented 11/05/2015 às 17:39
  • PERFEITO! NENHUMA FALHA OU COMPLICAÇÃO!
    – Lollipop
    Commented 11/05/2015 às 20:08
  • Sanção, último pedido: poderia definir como 00:00:00. No momento está 1 minutos 50 Segundos. OBRIGADO!
    – Lollipop
    Commented 11/05/2015 às 20:31
  • 1
    quando há mais de 24h já muda pra dias: 6 dias 23:59:58 e 7 dias 00:00:38, quando tem menos não aparece conforme condição if (dias) Commented 12/05/2015 às 14:11
12

Pode implementar um cronômetro front-end utilizando JavaScript onde ao clicar em Play inicia o timer, quando o usuário clicar em Pause ou fechar a janela deve-se então mandar um Ajax para o PHP atualizar o valor corrente do timer no banco de dados. Na próxima vez que a tela for aberta, faz-se então uma requisição Ajax ao PHP para que este retorne o valor corrente do timer que está salvo no banco.

HTML:

<body onload="restore_timer();">
    <form name="form">
        <input type="text" name="cronometro" value="00:00:00" />
        <br />
        <button type="button" onclick="timer(this); return false;">Play</button>
    </form>
</body>

JavaScript:

$(document).ready(function() {
    var t = form.cronometro.value;
    var hora = t.substring(0, 2);
    var minuto = t.substring(3, 5);
    var segundo = t.substring(6, 8);

    restore_timer = function() {
        send_ajax("get_time");
    }

    var interval;
    send_ajax = function(opt) {
        $.ajax({
            method: "POST",
            async: "false",
            url: "timer.php",
            data: {"opt": opt}
        }).done(function(msg) {
            if (opt == "get_time") {
                if (msg.status == "started") {
                    $('button').html('Pause');
                    interval = setInterval('tempo()', 983);
                }
                form.cronometro.value = msg.time;
                t = msg.time;
                hora = t.substring(0, 2);
                minuto = t.substring(3, 5);
                segundo = t.substring(6, 8);
            }
        });
    }

    timer = function(obj) {
        var html = $(obj).html();
        if (html == 'Play') {
            interval = setInterval('tempo()', 983);
            send_ajax("start_timer");
            $(obj).html('Pause');
        } else {
            clearInterval(interval);
            send_ajax("save_time");
            $(obj).html('Play');
        }
    }

    tempo = function(){ 
       if (segundo < 59) {
          segundo++;
          if (segundo < 10)
             segundo = "0" + segundo;
       } else if (segundo == 59 && minuto < 59) {
          segundo = 0 + "0";
          minuto++;
          if (minuto < 10)
             minuto = "0" + minuto;
       }
       if (minuto == 59 && segundo == 59) {
          segundo = 0 + "0";
          minuto = 0 + "0";
          hora++;
          if (hora < 10)
             hora = "0" + hora;
       }
       form.cronometro.value = hora + ":" + minuto + ":" + segundo;
    }
});

PHP:

if ($_POST) {
    $opt = $_POST['opt'];

    $servername = "localhost";
    $username = "USUARIO";
    $password = "SENHA";
    $dbname = "BANCO_DE_DADOS";

    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    if ($opt == "get_time") {
        $sql = "SELECT * FROM time_stamps WHERE id = 1";
        $result = $conn->query($sql);

        $old_time_stamp;
        header('Content-Type: application/json');
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                $old_time_stamp = $row["time_stamp"];
            }

            $date = new DateTime();
            $time_stamp = $date->getTimestamp();

            echo json_encode(array("status" => "started", "time" => date('H:i:s', ($time_stamp - $old_time_stamp))));
        } else {
            $sql = "SELECT * FROM timer WHERE id = 1";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                while($row = $result->fetch_assoc()) {
                    echo json_encode(array("time" => $row["time"]));
                }
            }
        }
    } elseif ($opt == "start_timer") {
        $date = new DateTime();
        $time_stamp = $date->getTimestamp();
        $sql = "INSERT INTO time_stamps VALUES (1, '{$time_stamp}')";
        $result = $conn->query($sql);
    } elseif ($opt == "save_time") {
        $sql = "SELECT * FROM time_stamps WHERE id = 1";
        $result = $conn->query($sql);

        $old_time_stamp;
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                $old_time_stamp = $row["time_stamp"];
            }
        }

        $sql = "DELETE FROM time_stamps WHERE id = 1";
        $result = $conn->query($sql);

        $date = new DateTime();
        $time_stamp = $date->getTimestamp();

        $new_time = explode(":", date('H:i:s', ($time_stamp - $old_time_stamp)));

        $sql = "SELECT * FROM timer WHERE id = 1";
        $result = $conn->query($sql);

        $old_time;
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                $old_time = explode(":", $row["time"]);
            }
        }

        $hour = intval($old_time[0] + $new_time[0]);
        $minute = intval($old_time[1] + $new_time[1]);
        $second = intval($old_time[2] + $new_time[2]);
        while ($second >= 60) {
            $second = $second - 60;
            $minute++;
        }
        while ($minute >= 60) {
            $minute = $minute - 60;
            $hour++;
        }
        if ($second < 10)
            $second = "0" . strval($second);
        if ($minute < 10)
            $minute = "0" . strval($minute);
        if ($hour < 10)
            $hour = "0" . strval($hour);

        $time = "{$hour}:{$minute}:{$second}";

        $sql = "UPDATE timer SET time = '{$time}' WHERE id = 1";
        $result = $conn->query($sql);
    }
    $conn->close();
}

DataBase:

CREATE TABLE timer (
    id INT PRIMARY KEY,
    time VARCHAR(10) NOT NULL
);

CREATE TABLE time_stamps (
    id INT PRIMARY KEY,
    time_stamp VARCHAR(255) NOT NULL
);

INSERT INTO timer values (1, "00:00:00");

Neste exemplo tenho apenas um registro na tabela timer, se você necessitar mais terá de mudar um pouco a lógica, mas acredito que isto não será problema.

Segue exemplo funcionando.

Atenção: Não fiz nenhuma validação do valor transitado pelas requisições, se o usuário alterar o HTML na mão e der Pause vai mandar para o banco e salvar normalmente.

16
  • Mas a questão é DEIXAR ROLANDO e NÃO PAUSAR e continuar de onde FECHOU a janela.
    – Lollipop
    Commented 11/05/2015 às 16:07
  • Mano, muito obrigado pela força, mas ainda nao é isso. É quase isso.
    – Lollipop
    Commented 11/05/2015 às 16:08
  • @Lollipop por isso eu havia sugerido timestamp e não lembrava, quando fui fazer o exemplo agora pensei "assim é mais simples, não precisa do timestamp"... vou corrigir e daqui a pouco edito a resposta. Commented 11/05/2015 às 16:10
  • 1
    Veja uma situação: Iniciei o trabalho às 13:00, fechei a janela acidentalmente ou desliguei o PC às 13:30, 'e quando eu voltar', deve ser calculado o tempo que iniciei até o tempo que voltei, continuando a contagem automaticamente a partir das 13:30...Acho que o grande lançe é diferenciar o pause do "rodando", se eu não dei pause e tem um diferença, é pq ta rodando! Se há pausa, continua da pausa, como vc fez. Mas o buxo será pegar depois de uma pausa e play! PODE ATUALIZAR O EXEMPLO TBM? Abraço!
    – Lollipop
    Commented 11/05/2015 às 16:12
  • @Lollipop atualizei a resposta e o exemplo funcionando, tive que dar uma saída aqui e acabei demorando um pouco. Commented 11/05/2015 às 17:40
4

Desenvolvi uma solução com dados persistentes armazenados em arquivo e usando localStorage. Creio que esta solução atenderá o seu caso.

A solução é simples, o código ficou grande pois criei um gerenciador para testar o funcionamento.

Caso queira armazenar um banco de dados, basta mudar as funções de persistência da classe.

<?php

//
// Lib 
//

const CHRON_PATH  = '\path\to\data\\';

const CHRON_STOP  = 0x00;
const CHRON_PAUSE = 0x01;
const CHRON_PLAY  = 0x03;

class PersistentChronometer {
    // fields

    private $_id;
    private $_elapsed;
    private $_status;
    private $_statustime;

    // construtor privado

    private function __construct() {}

    // propriedades

    function __get($prop) {
        switch($prop) {
        case 'id':
            return $this->_id;
        case 'status':
            return $this->_status;
        case 'elapsed':
            $elapsed = $this->_elapsed;

            if ($this->_status == CHRON_PLAY)
                $elapsed += max(microtime(true) - $this->_statustime, 0);

            return $elapsed;
        }
    }

    // comandos

    public function play() {
        if($this->_status == CHRON_PLAY)
            return;

        $this->_statustime = microtime(true);
        $this->_status = CHRON_PLAY;
    }

    public function pause() {
        if($this->_status != CHRON_PLAY)
            return;

        $time = microtime(true);

        $this->_elapsed += max($time - $this->_statustime, 0);

        $this->_statustime = microtime(true);
        $this->_status = CHRON_PAUSE;
    }

    public function stop() {
        if($this->_status == CHRON_STOP)
            return;

        $this->_statustime = microtime(true);
        $this->_elapsed = 0;
        $this->_status = CHRON_STOP;
    }

    // persistência

    public static function create() {
        $chron = new PersistentChronometer();
        $chron->_statustime = microtime(true);
        $chron->_elapsed = 0;
        $chron->_status = CHRON_STOP;

        $i = 0;
        while (true) {
            $chron->_id = ((int)$chron->_statustime) . '$' . $i++;

            $fname = CHRON_PATH . $chron->_id . '.chron';
            if(file_exists($fname)) 
                continue;
            $f = fopen($fname, 'w');
            fwrite($f, $chron->serialize());
            fclose($f);
            break;
        } 

        return $chron;
    }

    public static function load($id) {
        $fname = CHRON_PATH . $id . '.chron';

        if(!file_exists($fname))
            return false;
        $f = fopen($fname, 'r');
        $chron = PersistentChronometer::unserialize(fread($f, 255));
        fclose($f);

        return $chron;
    }

    public function save() {
        $fname = CHRON_PATH . $this->_id . '.chron';
        $f = fopen($fname, 'w');
        ftruncate($f, 0);
        fwrite($f, $this->serialize());
        fclose($f);
    }

    public function delete() {
        $fname = CHRON_PATH . $this->_id . '.chron';
        unlink($fname);
    }

    public function serialize() {
        return json_encode(array(
            'id' => $this->_id,
            'elapsed' => $this->_elapsed,
            'status' => $this->_status,
            'statustime' => $this->_statustime
        ));
    }

    public static function unserialize($string) {
        $data = json_decode($string);

        $chron = new PersistentChronometer();
        $chron->_id = $data->id;
        $chron->_elapsed = $data->elapsed;
        $chron->_status = $data->status;
        $chron->_statustime = $data->statustime;

        return $chron;
    }
}

//
// Comandos
//

if(isset($_GET['action'])) {
    switch($_GET['action']) {
    case 'play':
        if(isset($_GET['id'])
          && (($chron = PersistentChronometer::load($_GET['id'])) !== false)) {
            $chron->play();
            $chron->save();
        }
        break;
    case 'pause':
        if(isset($_GET['id'])
          && (($chron = PersistentChronometer::load($_GET['id'])) !== false)) {
            $chron->pause();
            $chron->save();
        }
        break;
    case 'stop':
        if(isset($_GET['id'])
          && (($chron = PersistentChronometer::load($_GET['id'])) !== false)) {
            $chron->stop();
            $chron->save();
        }
        break;
    case 'new':
        PersistentChronometer::create();
        break;
    case 'delete':
        if(isset($_GET['id'])
          && (($chron = PersistentChronometer::load($_GET['id'])) !== false)) {
            $chron->delete();
        }
        break;
    case 'get':
        if(isset($_GET['id'])
          && (($chron = PersistentChronometer::load($_GET['id'])) !== false)) {

            $data = new stdClass();
            $data->id = $chron->id;
            $data->elapsed = $chron->elapsed;
            $data->status = $chron->status;
            $data->result = true;

            echo json_encode($data);
        } else {
            echo '{"result": false}';
        }

        return;
    }
}

//
// Output
//

?>
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>
        $(function(){
            var cEl = $('#chron');
            if(!window.localStorage)
                cEl.text('Para esta solução é necessário o uso de localStorage. Mas também podem ser utilizados cookies ou variaveis de sessão!!!');
            else {
                var id = localStorage.getItem("chron-id");

                if(!id)
                    cEl.text('Nenhum cronômetro definido!');
                else {
                    loadChronometer(id);
                    cEl.text('Aguarde...');
                }
            }
        });

        function setChronometer(id) {
            localStorage.setItem("chron-id", id);
            loadChronometer(id);
        }

        function loadChronometer(id) {
            var status = {
                <?php echo CHRON_STOP ?>: 'Parado',
                <?php echo CHRON_PLAY ?>: 'Executando',
                <?php echo CHRON_PAUSE ?>: 'Interrompido'
            };
            var cEl = $('#chron');
            $.getJSON('?action=get&id=' + id, null, function(data) {
                if(data.result)
                    cEl.text(
                        'ID: ' + data.id + "\n" +
                        'Estado: ' + status[data.status] + "\n" +
                        'Tempo (seg): ' + data.elapsed + "\n"
                    ).append(
                        '<a href="javascript:setChronometer(\'' + data.id + '\')">Atualizar</a> | ' +
                        (data.status == <?php echo CHRON_STOP ?> ? '' : '<a href="?action=stop&id=' + data.id + '">Parar</a> | ') +
                        (data.status == <?php echo CHRON_PLAY ?> ? '' : '<a href="?action=play&id=' + data.id + '">Executar</a> | ') +
                        (data.status != <?php echo CHRON_PLAY ?> ? '' : '<a href="?action=pause&id=' + data.id + '">Interromper</a> | ') +
                        '<a href="javascript:setChronometer(null)">Remover</a>' 
                    );
                else
                    cEl.text('Nenhum cronômetro definido!');
            });
        }
    </script>
</head>
<body>
<h1>Cronômetro padrão</h1>

<pre id="chron" style="white-space: pre"></pre>


<h1>Gerenciador</h1>
<table>
    <thead>
        <td>ID</td>
        <td>Estado</td>
        <td colspan="5">Comandos</td>
        <td>Tempo (seg)</td>
    </thead>
<?php

$files = scandir(CHRON_PATH);
$chrons = array();
foreach($files as $file) {
    if (substr($file, -6) == '.chron')
        $chrons[] = PersistentChronometer::load(substr($file, 0, -6));
}

$status = array(
    CHRON_STOP  => 'Parado',
    CHRON_PLAY  => 'Executando',
    CHRON_PAUSE => 'Interrompido'
);

foreach($chrons as $chron) {
    $td = array();
    $td[] = $chron->id;
    $td[] = $status[$chron->status];

    $td[] = $chron->status == CHRON_STOP ? '' : '<a href="?action=stop&id='. $chron->id .'">Parar</a>';
    $td[] = $chron->status == CHRON_PLAY ? '' : '<a href="?action=play&id='. $chron->id .'">Executar</a>';
    $td[] = $chron->status != CHRON_PLAY ? '' : '<a href="?action=pause&id='. $chron->id .'">Interromper</a>';
    $td[] = '<a href="?action=delete&id='. $chron->id .'">Destruir</a>';
    $td[] = '<a href="javascript:setChronometer(\''. $chron->id .'\')">Padrão</a>';
    $td[] = $chron->elapsed;
    echo '<tr id="cron-'. $chron->id .'"><td>'. implode('</td><td>', $td) .'</td></tr>';
}

?>
</table>
<a href="?action=new">Novo cronômetro</a>
</body>
</html>
3
  • O uso será por usuário. Como diferenciaria um usuário do outro? Belo código!
    – Lollipop
    Commented 11/05/2015 às 19:47
  • 1
    Obrigado. Fiz esse código apenas para atender sua necessidade, pois percebi nos comentário anteriores que estava havendo muita confusão sobre sua real necessidade. Como pode perceber no código, você consegue obter as informações de um determinado cronômetro pela requisição de ?action=get&id={id}. Mas editar a resposta para uma solução mais específica. Commented 11/05/2015 às 19:52
  • Na realidade, não tem muito segredo, basta vincular seu usuário ao ID de um cronômetro criado com a função PHP PersistentChronometer::create(). A classe é bem simples e muito versátil, se analisar o código do pequeno gerenciador que acompanha, logo vai entender e poderá implementar no seu projeto. Commented 11/05/2015 às 20:12
2

Creio que se você pode usar os atributos do localStorage() para chegar em uma solução! O localStorage é uma função implementada em browsers mais atualizados (óbvil que não o IE) onde o browser salva uma informação sobre aquele domínio acessado dentro de uma variável, assim você pode pegar e salvar informações na variável quando a página for fechada e quando abrir a mesma, buscar o valor inicial do click e com base nisso continuar a contar o cronômetro. Os registros da variável só são excluídos quando reescrevidos ou então quando o cache do browser é limpo.

1
  • 1
    Vejo um problema nisso caso o usuário possa acessar o sistema de outro navegador/máquina.
    – Lollipop
    Commented 11/05/2015 às 18:00
1

Você poderia armazenar no cookie ou via Web SQL o valor inicial, o timestamp onde iniciou o seu cronometro. Ao sair da pagina o valor estaria salvo no navegador do usuário, e caso já tenha algum dado gravado no navegador ele continuaria de onde parou. Também seria interessante armazenar o estado do seu cronometro (rodando, pausado).

5
  • Isso seria mais seguro, em termos de perca de dados, do que salvar via banco de dados no seu próprio servidor?
    – Lollipop
    Commented 11/05/2015 às 17:30
  • 1
    Vejo um problema nisso caso o usuário possa acessar o sistema de outro navegador/máquina. Commented 11/05/2015 às 17:42
  • Então.............
    – Lollipop
    Commented 11/05/2015 às 17:46
  • Não, não seria mais seguro, mas poderia ser mais eficiente em um primeiro momento. O que você pode fazer é trabalhar das duas formas, no navegador e no servidor, e de tempos em tempos sincronizar ambos.
    – Lucas Polo
    Commented 12/05/2015 às 12:32
  • @LucasPolo, não sei se você viu mas já tinha trazido esta solução ao citar o localStorage() na resposta acima Commented 14/05/2015 às 19:48
1

Se você não precisa se preocupar com o usuário alterando suas variáveis no js aconselho a seguir a solução do @LucasPolo, caso contrário faria algo assim:

Ao iniciar o cronômetro, o js executa uma requisição ao servidor que salva no banco de dados o timestamp atual (obtido através do php, não do js).

O js continua rodando o cronômetro e a cada intervalo determinado de tempo, ou quando o usuário voltar ao navegador (após tê-lo fechado)0 o js faz uma requisição ao servidor para obter o tempo decorrido desde o início.

1
  • Isso awe, man!!
    – Lollipop
    Commented 11/05/2015 às 17:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .