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.
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.onLoad
.