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
Top comments (0)