Neste artigo vamos ver como calcular a diferença de horários utilizando JavaScript. Vamos ver dois exemplos. O primeiro, mais imples, vai trabalhar com a diferença entre dois horários. O segundo exemplo, mais complexo, vai ser um sistema de ponto, então vamos ter quatro horários, o horário de entrada, a saída para o almoço, o retorno do almoço e o horário de saída. Vamos comparar um período de trabalho informado com um período base que servirá como referência.

Começando pelo exemplo mais simples. Para calcular a diferença entre horários podemos criar um novo objeto Date com os periodos informados, e fazer a substração de ambos. Existem métodos no objeto Date que permitem extrair as informações de hora, minuto e segundo da diferença entre os dois horários

var inicio = new Date("2022-02-20T09:00:10");

var fim = new Date("2022-02-20T13:25:17");

var diferenca = new Date( fim - inicio );

var resultado =  diferenca.getUTCHours() + "h ";

resultado += diferenca.getUTCMinutes() + "m ";

resultado += diferenca.getUTCSeconds() + "s ";

console.log(resultado);

A diferença que foi calculada é o número de milissegundos entre as duas datas/horas. Os metódos getUTCHours, getUTCMinutes e getUTCSeconds nos ajudam a formatar a exibição da diferença entre  entre as duas datas/horas.

Agora vamos ver o exemplo do sistema de ponto. Como descrito no começo do artigo, vamos ter quatro horários de referência, que é a jornada base (entrada, intervalos, saída) e vamos comparar com os dados informados pelo funcionário.

Para isso, vamos criar duas funções auxiliares, a primeira vai chamar "parse" e vai receber uma string no formato hora:minuto e vai separar para fazer o cálculo do tempo

function parse(horario) {

    let [hora, minuto] = horario.split(':').map(v => parseInt(v));

    if (!minuto) { // para o caso de não ter os minutos

        minuto = 0;

    }

    return minuto + (hora * 60);

}

A função parse vai separar a string do horário informado utilizando o ":" como separador,  para isso foi utilizado o método split da string horario. O resultado do split é um array que será interado utilizado o método map. Para cada elemento separado ele vai converter para inteiro cada um dos números utilizando a função parseInt. O resultado será armazenado em variáveis chamadas hora e minuto. O retorno desta função vai ser um número inteiro com o horário informado em minutos.

A outra função auxiliar vai se chamar duracao, e ela vai ser responsável por receber os quatro horários e fazer o cálculo usando a primeira função que criamos. 

function duracao(entrada1, saida1, entrada2, saida2) {

    return (parse(saida1) - parse(entrada1)) + (parse(saida2) - parse(entrada2));

}

Para testar o que fizemos até agora, podemos executar o seguinte código:

function parse(horario) {

    // divide a string em duas partes, separado por dois-pontos, e transforma em número

    let [hora, minuto] = horario.split(':').map(v => parseInt(v));

    if (!minuto) { // para o caso de não ter os minutos

        minuto = 0;

    }

    return minuto + (hora * 60);

}

// calcula a duração total em minutos

function duracao(entrada1, saida1, entrada2, saida2) {

    return (parse(saida1) - parse(entrada1)) + (parse(saida2) - parse(entrada2));

}

// duração de uma jornada normal de trabalho (em minutos)

let jornadaNormal = duracao('8:00', '12:00', '13:00', '18:00');

// quantidade de minutos efetivamente trabalhados

let jornada = duracao('08:00', '12:06', '12:59', '17:00');

console.log(jornadaNormal);

console.log(jornada);

Agora que temos a duração em minutos das duas jornadas, podemos fazer o cálculo e verificar se a jornada de trabalho informada ou maior ou menor que a jornada base armazenada na variável jornadaNormal.

let diff = Math.abs(jornada - jornadaNormal);

if (diff != 0) {

    let horas = Math.floor(diff / 60);

    let minutos = diff - (horas * 60);

    console.log(`${horas} horas e ${minutos} minutos a ${jornada > jornadaNormal ? 'mais' : 'menos'}`);

}

No exempo acima, foi feita a conversão dos minutos em hora e minutos, e foi feito um if ternário para informar se o retorno é maior ou menor que a jornada base de trabalho.

O código completo ficará da seguinte forma:

function parse(horario) {

    // divide a string em duas partes, separado por dois-pontos, e transforma em número

    let [hora, minuto] = horario.split(':').map(v => parseInt(v));

    if (!minuto) { // para o caso de não ter os minutos

        minuto = 0;

    }

    return minuto + (hora * 60);

}

// calcula a duração total em minutos

function duracao(entrada1, saida1, entrada2, saida2) {

    return (parse(saida1) - parse(entrada1)) + (parse(saida2) - parse(entrada2));

}

// duração de uma jornada normal de trabalho (em minutos)

let jornadaNormal = duracao('8:00', '12:00', '13:00', '18:00');

// quantidade de minutos efetivamente trabalhados

let jornada = duracao('08:00', '12:06', '12:59', '17:00');

console.log(jornadaNormal);

console.log(jornada);

// diferença entre as jornadas

let diff = Math.abs(jornada - jornadaNormal);

if (diff != 0) {

    let horas = Math.floor(diff / 60);

    let minutos = diff - (horas * 60);

    console.log(`${horas} horas e ${minutos} minutos a ${jornada > jornadaNormal ? 'mais' : 'menos'}`);

}

Encerramento

Neste artigo você aprendeu como calcular a diferença entre horas utilizando JavaScript.

Um outro problema muito comum é o cálculo de dias úteis entre duas datas

No artigo a seguir eu mostro como isso pode ser feito no JavaScript

Calculando a diferença de dias úteis entre duas datas utilizando JavaScript

Se você deseja aprofundar seus conhecimentos em JavaScript eu recomendo você dar uma olhada nestes artigos:

Resolvendo problemas comuns de matemática com JavaScript

Manipulando strings com JavaScript