JAVASCRIPT

Calcular a diferença entre horas utilizando JavaScript

20/02/2022JAVASCRIPT

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

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

Outros conteudos que podem ser de seu interesse

Localizando e substituindo dados com expressões regulares com JavaScript
07/11/2019JAVASCRIPT

Localizando e substituindo dados com expressões regulares com JavaScript

Veja alguns exemplos de como localizar ou atualizar dados com expressões regulares

Saiba mais...
Avisar quantos caracteres faltam com JavaScript
22/10/2019JAVASCRIPT

Avisar quantos caracteres faltam com JavaScript

Avise quantos caracteres faltam ao digitar dados em seu formulário

Saiba mais...

Conteúdo sobre banco de dados sem complicação!

MySQL - Referência Rápida

 

SQL Server - Referência Rápida

 

SQL vs Mongo