Como converter segundos para minutos e horas em vanila JS

Nota: apenas traduzi o texto abaixo e postei aqui.

Trabalhar com o tempo em JavaScript pode ser complicado. Hoje vou mostrar como converter segundos em minutos e horas com vanilla JS.

Aviso: precisaremos fazer algumas contas de matemática.

Convertendo horas

Digamos que você tenha um timestamp em segundos que deseja exibir no formato HH:MM:SS.

var timestamp = 9462;

Primeiro, vamos às horas.

Há 60 segundos em um minuto e 60 minutos em uma hora. Dividiremos nosso timestamp por 60 e depois por 60 novamente. Isso nos deixa com o resultado de 2.6283.

var timestamp = 9462;

// 2.628333333
var hours = timestamp / 60 / 60;

Queremos apenas algumas horas, no entanto. Podemos usar Math.floor() para arredondar para o integer mais próximo.

var timestamp = 9462;

// 2
var hours = Math.floor(timestamp / 60 / 60);

Convertendo minutos

A seguir, vamos aos minutos.

Existem 60 segundos em um minuto. Vamos dividir nosso timestamp por 60 e usar Math.floor() para arredondar para o integer mais próximo. Isso nos deixa com 157, porque também inclui todos os minutos que estão em nossas horas.

var timestamp = 9462;

// 2
var hours = Math.floor(timestamp / 60 / 60);

// 157
var minutes = Math.floor(timestamp / 60);

Multiplicaremos as nossas horas por 60 para obter o seu valor em minutos e, em seguida, subtrairemos dos nossos minutos para obter o valor correto.

var timestamp = 9462;

// 2
var hours = Math.floor(timestamp / 60 / 60);

// 37
var minutes = Math.floor(timestamp / 60) - (hours * 60);

Calculando os segundos

Finalmente, vamos calcular os segundos.

Para este, podemos usar o remainder operator. Ele retorna o valor que sobrou após a divisão por um número.

Usaremos isso para dividir nosso timestamp por 60 (o número de segundos em um minuto). O número que retornamos são os segundos depois de removermos todos os minutos.

var timestamp = 9462;

// 2
var hours = Math.floor(timestamp / 60 / 60);

// 37
var minutes = Math.floor(timestamp / 60) - (hours * 60);

// 42
var seconds = timestamp % 60;

Formatando o time

Agora que temos horas, minutos e segundos, estamos prontos para formatá-los em nosso formato HH:MM:SS.

Podemos usar concatenação simples de strings para isso. JavaScript irá aplicar coerção em nossos integers para obter as strings.

// 2:37:42
var formatted = hours + ':' + minutes + ':' + seconds;

Isso pode ser bom o suficiente, mas e se você quisesse um 0 à esquerda nas horas? E se nossos minutos ou segundos fossem números de um único dígito?

Podemos converter nossos números em strings e usar o método padStart() para impor um número mínimo de dígitos.

// 02:37:42
var formatted = hours.toString().padStart(2, '0') + ':' +
  minutes.toString().padStart(2, '0') + ':' +
  seconds.toString().padStart(2, '0');

Atualização (14/07/2024)

Outra forma de executar a lógica:

function formatSeconds(sec) {
    if(typeof sec !== 'number' || Number.isNaN(sec)) {
        return '';
    }
    return ([
        Math.trunc(sec / 60 / 60), // horas
        Math.trunc(sec / 60 % 60), // minutos
        sec % 60 // ----------------- segundos
    ]).map(val => val.toString().padStart(2, '0')).join(':');
}

E com isso, terminamos.

Fonte

Newsletter de Go Make Things