Skip to main content

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_stamp (
    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.

Luis Henrique
  • 3,8mil
  • 1
  • 17
  • 30