Colocar um CountUp na página

[jribeirojr 1]

Pessoal,

Estou desenvolvendo um sistema de gestão de tarefas, e quero colocar um botão na tarefa onde o usuário irá clicar para informar que a tarefa começou a ser executada, este botão irá contabilizar o tempo, ou seja, é um relógio que irá ficar marcando quanto tempo o usuário está realizando aquela tarefa, mas quero que, o usuário continue navegando no sistema mas o contador continue rolando independente da página que o usuário esteja, por exemplo como na imagem abaixo, veja que no rodapé tem um relógio que fica contando o tempo, o usuário muda de página mas este relógio continua la:

http://prnt.sc/c3a704

Não estou conseguindo entender como isto pode ser feito, ou que caminho seguir para tentar achar uma solução, se alguém puder me dar uma ajuda em como resolver, ajudo.

Estou usando PHP, JQuery, MySQL

Obrigado a todos

[Klaider 5]

O que você já tentou fazer?

[jribeirojr 1]

Já tentei quando o usuário clicar no botão para iniciar o cronometro, criar uma session em jquery ou php, e a cada página que ele acessar eu verifico se existe esta session, caso sim eu habilito uma div no rodapé com a contagem, mas qual o problema disso:

1 - ter que colocar uma div no rodapé de todas as páginas

2 - saber em que momento o tempo está, ou seja, ele pode acessar a página e ao carregar a div teria que carregar com o tempo 00:01:58 porque já se passaram 1 minuto e 58 segundos desde que ele iniciou

3 - se ele clicar em pausar ou parar eu tb teria que ter este jquery em todas as páginas para poder controlar isto

Isso me pareceu um pouco ruim, principalmente porque na parte de manutenção de código isso pode acabar sendo ruim.

[Klaider 5]

Mas colocar uma div no rodapé de todas as páginas não é difícil, basta ter um rodapé estruturado em PHP. E essa coisa de "quanto tempo já foi passado" pode ser feita de diferentes formas.

1) Você pode salvar o tempo atual do calendário em milisegundos como cookie. Então, para descobrir quantos segundos passaram desde esse cookie é só subtrair o tempo atual do calendário em milisegundos pelo mesmo valor do cookie, exemplo:

var elapsed = (window.performance || Date).now() - firstAccessTime;

var hours = parseInt(elapsed / 144e4) % 24, // horas
    minutes = parseInt(elapsed / 6e4) % 60, // minutos
    seconds = hoursparseInt(elapsed / 1e3) % 60; // segundos

Nesse exemplo, "firstAccessTime" teria sido o mesmo que:

(window.performance || Date).now()

alguma vez.

Então uma vez que a página carrega é preciso fazer algo como isso para obter o tempo de acesso do usuário desde que ele entrou no site pela primeira vez em um navegador dele, e através desses dados você pode fazer um contador desse que vai crescendo os segundos, minutos e horas enquanto o usuário esteja ativo na página, portanto isso será apenas uma aparência. Você pode fazer o mesmo ao lado do servidor se preferir (sim, eu recomendaria caso o usuário estivesse logado na sua conta).