¿Convertir segundos a HH-MM-SS con JavaScript?

¿Cómo puedo convertir segundos a una HH-MM-SScadena usando JavaScript?

¿No sabes datejs ? Es un deber saber.

Usando datejs, solo escribe algo como:

(new Date).clearTime()
          .addSeconds(15457)
          .toString('H:mm:ss');

--actualizar

Hoy en día date.js está desactualizado y no se mantiene, así que usa " Moment.js ", que es mucho mejor como lo señala TJ Crowder.

--actualización 2

Utilice @ Frank es una solución de una línea:

new Date(SECONDS * 1000).toISOString().substr(11, 8)

Es, con mucho, la mejor solución.

Puede lograr hacer esto sin ninguna biblioteca externa de JavaScript con la ayuda del método de Fecha de JavaScript como el siguiente:

var date = new Date(null);
date.setSeconds(SECONDS); // specify value for SECONDS here
var result = date.toISOString().substr(11, 8);

O, según el comentario de @Frank ; un trazador de líneas:

new Date(SECONDS * 1000).toISOString().substr(11, 8);

No creo que ninguna característica incorporada del objeto Date estándar haga esto por usted de una manera que sea más conveniente que simplemente hacer los cálculos usted mismo.

hours = Math.floor(totalSeconds / 3600);
totalSeconds %= 3600;
minutes = Math.floor(totalSeconds / 60);
seconds = totalSeconds % 60;

Ejemplo:

let totalSeconds = 28565;
let hours = Math.floor(totalSeconds / 3600);
totalSeconds %= 3600;
let minutes = Math.floor(totalSeconds / 60);
let seconds = totalSeconds % 60;

console.log("hours: " + hours);
console.log("minutes: " + minutes);
console.log("seconds: " + seconds);

// If you want strings with leading zeroes:
minutes = String(minutes).padStart(2, "0");
hours = String(hours).padStart(2, "0");
seconds = String(seconds).padStart(2, "0");
console.log(hours + ":" + minutes + ":" + seconds);

Sé que esto es un poco viejo, pero ...

ES2015:

var toHHMMSS = (secs) => {
    var sec_num = parseInt(secs, 10)
    var hours   = Math.floor(sec_num / 3600)
    var minutes = Math.floor(sec_num / 60) % 60
    var seconds = sec_num % 60

    return [hours,minutes,seconds]
        .map(v => v < 10 ? "0" + v : v)
        .filter((v,i) => v !== "00" || i > 0)
        .join(":")
}

Producirá:

toHHMMSS(129600) // 36:00:00
toHHMMSS(13545) // 03:45:45
toHHMMSS(180) // 03:00
toHHMMSS(18) // 00:18

Como Cleiton señaló en su respuesta , moment.js puede usarse para esto:

moment().startOf('day')
        .seconds(15457)
        .format('H:mm:ss');

function formatSeconds(seconds)
{
    var date = new Date(1970,0,1);
    date.setSeconds(seconds);
    return date.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
}

Esto hace el truco:

function secondstotime(secs)
{
    var t = new Date(1970,0,1);
    t.setSeconds(secs);
    var s = t.toTimeString().substr(0,8);
    if(secs > 86399)
        s = Math.floor((t - Date.parse("1/1/70")) / 3600000) + s.substr(2);
    return s;
}

(Procedente de aquí )

var  timeInSec = "661"; //even it can be string

String.prototype.toHHMMSS = function () { 
   /* extend the String by using prototypical inheritance */
    var seconds = parseInt(this, 10); // don't forget the second param
    var hours   = Math.floor(seconds / 3600);
    var minutes = Math.floor((seconds - (hours * 3600)) / 60);
    seconds = seconds - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    var time    = hours+':'+minutes+':'+seconds;
    return time;
}

alert("5678".toHHMMSS());   // "01:34:38"
console.log(timeInSec.toHHMMSS());   //"00:11:01"

podemos hacer que esta función sea mucho más corta y nítida, pero eso disminuye la legibilidad, por lo que la escribiremos de la manera más simple y estable posible.

o puedes comprobar esto trabajando aquí :

Prueba esto:

function toTimeString(seconds) {
  return (new Date(seconds * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
}

Aquí hay una extensión de la clase Number. toHHMMSS () convierte segundos en una cadena hh: mm: ss.

Number.prototype.toHHMMSS = function() {
  var hours = Math.floor(this / 3600) < 10 ? ("00" + Math.floor(this / 3600)).slice(-2) : Math.floor(this / 3600);
  var minutes = ("00" + Math.floor((this % 3600) / 60)).slice(-2);
  var seconds = ("00" + (this % 3600) % 60).slice(-2);
  return hours + ":" + minutes + ":" + seconds;
}

// Usage: [number variable].toHHMMSS();

// Here is a simple test
var totalseconds = 1234;
document.getElementById("timespan").innerHTML = totalseconds.toHHMMSS();

// HTML of the test
<div id="timespan"></div>

Versión fácil de seguir para novatos:

 var totalNumberOfSeconds = YOURNUMBEROFSECONDS;
 var hours = parseInt( totalNumberOfSeconds / 3600 );
 var minutes = parseInt( (totalNumberOfSeconds - (hours * 3600)) / 60 );
 var seconds = Math.floor((totalNumberOfSeconds - ((hours * 3600) + (minutes * 60))));
 var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
 console.log(result);

Esta función debería hacerlo:

var convertTime = function (input, separator) {
    var pad = function(input) {return input < 10 ? "0" + input : input;};
    return [
        pad(Math.floor(input / 3600)),
        pad(Math.floor(input % 3600 / 60)),
        pad(Math.floor(input % 60)),
    ].join(typeof separator !== 'undefined' ?  separator : ':' );
}

Sin pasar un separador, se usa :como separador (predeterminado):

time = convertTime(13551.9941351); // --> OUTPUT = 03:45:51

Si desea usarlo -como separador, simplemente páselo como el segundo parámetro:

time = convertTime(1126.5135155, '-'); // --> OUTPUT = 00-18-46

Ver también este violín .

a continuación se muestra el código que convertirá los segundos al formato hh-mm-ss:

var measuredTime = new Date(null);
measuredTime.setSeconds(4995); // specify value of SECONDS
var MHSTime = measuredTime.toISOString().substr(11, 8);

Obtenga un método alternativo de Convertir segundos al formato HH-MM-SS en JavaScript

Para el caso especial de HH: MM: SS.MS (eq: "00: 04: 33.637") utilizado por FFMPEG para especificar milisegundos .

[-] [HH:] MM: SS [.m ...]

HH expresa el número de horas, MM el número de minutos para un máximo de 2 dígitos y SS el número de segundos para un máximo de 2 dígitos. La m al final expresa el valor decimal para SS.

/* HH:MM:SS.MS to (FLOAT)seconds ---------------*/
function timerToSec(timer){
   let vtimer = timer.split(":")
   let vhours = +vtimer[0]
   let vminutes = +vtimer[1]
   let vseconds = parseFloat(vtimer[2])
   return vhours * 3600 + vminutes * 60 + vseconds
}

/* Seconds to (STRING)HH:MM:SS.MS --------------*/
function secToTimer(sec){
  let o = new Date(0)
  let p =  new Date(sec*1000)  
  return new Date(p.getTime()-o.getTime())
    .toISOString()
    .split("T")[1]
    .split("Z")[0]
}

/* Example: 7hours, 4 minutes, 33 seconds and 637 milliseconds */
const t = "07:04:33.637"
console.log(
  t + " => " +
  timerToSec(t) +
  "s"
)

/* Test: 25473 seconds and 637 milliseconds */
const s = 25473.637 // "25473.637"
console.log(
  s + "s => " + 
  secToTimer(s)
)

Ejemplo de uso, un temporizador de transporte de milisegundos:

/* Seconds to (STRING)HH:MM:SS.MS --------------*/
function secToTimer(sec){
  let o = new Date(0)
  let p =  new Date(sec*1000)  
  return new Date(p.getTime()-o.getTime())
    .toISOString()
    .split("T")[1]
    .split("Z")[0]
}

let job, origin = new Date().getTime()
const timer = () => {
  job = requestAnimationFrame(timer)
  OUT.textContent = secToTimer((new Date().getTime() - origin) / 1000)
}

requestAnimationFrame(timer)

span {font-size:4rem}

<span id="OUT"></span>
<br>
<button onclick="origin = new Date().getTime()">RESET</button>
<button onclick="requestAnimationFrame(timer)">RESTART</button>
<button onclick="cancelAnimationFrame(job)">STOP</button>

Ejemplo de uso, vinculado a un elemento multimedia

/* Seconds to (STRING)HH:MM:SS.MS --------------*/
function secToTimer(sec){
  let o = new Date(0)
  let p =  new Date(sec*1000)  
  return new Date(p.getTime()-o.getTime())
    .toISOString()
    .split("T")[1]
    .split("Z")[0]
}

VIDEO.addEventListener("timeupdate", function(e){
  OUT.textContent = secToTimer(e.target.currentTime)
}, false)

span {font-size:4rem}

<span id="OUT"></span><br>
<video id="VIDEO" width="400" controls autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

Fuera de la pregunta, esas funciones escritas en php:

<?php 
/* HH:MM:SS to (FLOAT)seconds ------------------*/
function timerToSec($timer){
  $vtimer = explode(":",$timer);
  $vhours = (int)$vtimer[0];
  $vminutes = (int)$vtimer[1];
  $vseconds = (float)$vtimer[2];
  return $vhours * 3600 + $vminutes * 60 + $vseconds;
}
/* Seconds to (STRING)HH:MM:SS -----------------*/
function secToTimer($sec){
  return explode(" ", date("H:i:s", $sec))[0];  
}

var time1 = date1.getTime();
var time2 = date2.getTime();
var totalMilisec = time2 - time1;

alert(DateFormat('hh:mm:ss',new Date(totalMilisec)))

 /* ----------------------------------------------------------
 *  Field        | Full Form          | Short Form
 *  -------------|--------------------|-----------------------
 *  Year         | yyyy (4 digits)    | yy (2 digits)
 *  Month        | MMM (abbr.)        | MM (2 digits)
                 | NNN (name)         |
 *  Day of Month | dd (2 digits)      | 
 *  Day of Week  | EE (name)          | E (abbr)
 *  Hour (1-12)  | hh (2 digits)      | 
 *  Minute       | mm (2 digits)      | 
 *  Second       | ss (2 digits)      | 
 *  ----------------------------------------------------------
 */
function DateFormat(formatString,date){
    if (typeof date=='undefined'){
    var DateToFormat=new Date();
    }
    else{
        var DateToFormat=date;
    }
    var DAY         = DateToFormat.getDate();
    var DAYidx      = DateToFormat.getDay();
    var MONTH       = DateToFormat.getMonth()+1;
    var MONTHidx    = DateToFormat.getMonth();
    var YEAR        = DateToFormat.getYear();
    var FULL_YEAR   = DateToFormat.getFullYear();
    var HOUR        = DateToFormat.getHours();
    var MINUTES     = DateToFormat.getMinutes();
    var SECONDS     = DateToFormat.getSeconds();

    var arrMonths = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
    var arrDay=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
    var strMONTH;
    var strDAY;
    var strHOUR;
    var strMINUTES;
    var strSECONDS;
    var Separator;

    if(parseInt(MONTH)< 10 && MONTH.toString().length < 2)
        strMONTH = "0" + MONTH;
    else
        strMONTH=MONTH;
    if(parseInt(DAY)< 10 && DAY.toString().length < 2)
        strDAY = "0" + DAY;
    else
        strDAY=DAY;
    if(parseInt(HOUR)< 10 && HOUR.toString().length < 2)
        strHOUR = "0" + HOUR;
    else
        strHOUR=HOUR;
    if(parseInt(MINUTES)< 10 && MINUTES.toString().length < 2)
        strMINUTES = "0" + MINUTES;
    else
        strMINUTES=MINUTES;
    if(parseInt(SECONDS)< 10 && SECONDS.toString().length < 2)
        strSECONDS = "0" + SECONDS;
    else
        strSECONDS=SECONDS;

    switch (formatString){
        case "hh:mm:ss":
            return strHOUR + ':' + strMINUTES + ':' + strSECONDS;
        break;
        //More cases to meet your requirements.
    }
}

Solo quería dar una pequeña explicación a la buena respuesta anterior:

var totalSec = new Date().getTime() / 1000;
var hours = parseInt( totalSec / 3600 ) % 24;
var minutes = parseInt( totalSec / 60 ) % 60;
var seconds = totalSec % 60;

var result = (hours < 10 ? "0" + hours : hours) + "-" + (minutes < 10 ? "0" + minutes : minutes) + "-" + (seconds  < 10 ? "0" + seconds : seconds);

En la segunda línea, dado que hay 3600 segundos en 1 hora, dividimos el número total de segundos entre 3600 para obtener el número total de horas. Usamos parseInt para quitar cualquier decimal. Si totalSec fuera 12600 (3 horas y media), parseInt (totalSec / 3600) devolvería 3, ya que tendremos 3 horas completas. ¿Por qué necesitamos el% 24 en este caso? Si superamos las 24 horas, digamos que tenemos 25 horas (90000 segundos), entonces el módulo aquí nos llevará nuevamente a 1, en lugar de regresar a 25. Está limitando el resultado dentro de un límite de 24 horas, ya que hay 24 horas En un día.

Cuando ves algo como esto:

25 % 24

Piensa en esto, de esta manera:

25 mod 24 or what is the remainder when we divide 25 by 24

Coincidiendo con este viejo hilo, el OP declaró HH: MM: SS, y muchas de las soluciones funcionan, hasta que te das cuenta de que necesitas más de 24 horas en la lista. Y tal vez no desee más que una sola línea de código. Aqui tienes:

d=(s)=>{f=Math.floor;g=(n)=>('00'+n).slice(-2);return f(s/3600)+':'+g(f(s/60)%60)+':'+g(s%60)}

Devuelve H +: MM: SS. Para usarlo, simplemente use:

d(91260);     // returns "25:21:00"
d(960);       // returns "0:16:00"

... Traté de que usara la menor cantidad de código posible, para un enfoque agradable de una sola línea.

¿Has intentado agregar segundos a un objeto Date?

var dt = new Date();
dt.addSeconds(1234);

Una muestra: https://jsfiddle.net/j5g2p0dc/5/

Actualizado: faltaba un enlace de muestra, así que creé uno nuevo.

Aquí hay una función para convertir segundos a formato hh-mm-ss según la respuesta de powtac aquí

jsfiddle

/** 
 * Convert seconds to hh-mm-ss format.
 * @param {number} totalSeconds - the total seconds to convert to hh- mm-ss
**/
var SecondsTohhmmss = function(totalSeconds) {
  var hours   = Math.floor(totalSeconds / 3600);
  var minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
  var seconds = totalSeconds - (hours * 3600) - (minutes * 60);

  // round seconds
  seconds = Math.round(seconds * 100) / 100

  var result = (hours < 10 ? "0" + hours : hours);
      result += "-" + (minutes < 10 ? "0" + minutes : minutes);
      result += "-" + (seconds  < 10 ? "0" + seconds : seconds);
  return result;
}

Ejemplo de uso

var seconds = SecondsTohhmmss(70);
console.log(seconds);
// logs 00-01-10

Después de mirar todas las respuestas y no estar contento con la mayoría de ellas, esto es lo que se me ocurrió. Sé que llego muy tarde a la conversación, pero aquí está de todos modos.

function secsToTime(secs){
  var time = new Date(); 
  // create Date object and set to today's date and time
  time.setHours(parseInt(secs/3600) % 24);
  time.setMinutes(parseInt(secs/60) % 60);
  time.setSeconds(parseInt(secs%60));
  time = time.toTimeString().split(" ")[0];
  // time.toString() = "HH:mm:ss GMT-0800 (PST)"
  // time.toString().split(" ") = ["HH:mm:ss", "GMT-0800", "(PST)"]
  // time.toTimeString().split(" ")[0]; = "HH:mm:ss"
  return time;
}

Creo un nuevo objeto Fecha, cambio la hora a mis parámetros, convierto el Objeto Fecha en una cadena de tiempo y elimino las cosas adicionales dividiendo la cadena y devolviendo solo la parte que necesita.

Pensé en compartir este enfoque, ya que elimina la necesidad de expresiones regulares, lógica y acrobacias matemáticas para obtener los resultados en formato "HH: mm: ss", y en su lugar se basa en métodos integrados.

Puede consultar la documentación aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Hay muchas opciones para resolver este problema, y ​​obviamente hay una buena opción sugerida, pero quiero agregar un código optimizado más aquí

function formatSeconds(sec) {
     return [(sec / 3600), ((sec % 3600) / 60), ((sec % 3600) % 60)]
            .map(v => v < 10 ? "0" + parseInt(v) : parseInt(v))
            .filter((i, j) => i !== "00" || j > 0)
            .join(":");
}

si no desea formato cero con menos de 10 números, puede usar

function formatSeconds(sec) {
  return parseInt(sec / 3600) + ':' + parseInt((sec % 3600) / 60) + ':' + parseInt((sec % 3600) % 60);

}

Código de muestra http://fiddly.org/1c476/1

En una línea, usando la solución de TJ Crowder:

secToHHMMSS = seconds => `${Math.floor(seconds / 3600)}:${Math.floor((seconds % 3600) / 60)}:${Math.floor((seconds % 3600) % 60)}`

En una línea, otra solución que también cuenta días:

secToDHHMMSS = seconds => `${parseInt(seconds / 86400)}d ${new Date(seconds * 1000).toISOString().substr(11, 8)}`

Fuente: https://gist.github.com/martinbean/2bf88c446be8048814cf02b2641ba276

var sec_to_hms = function(sec){
var min, hours;
     sec = sec - (min = Math.floor(sec/60))*60;
     min = min - (hours = Math.floor(min/60))*60;
     return (hours?hours+':':'') + ((min+'').padStart(2, '0')) + ':'+ ((sec+'').padStart(2, '0'));
}
alert(sec_to_hms(2442542));

También puede usar el siguiente código:

int ss = nDur%60;
nDur   = nDur/60;
int mm = nDur%60;
int hh = nDur/60;

new Date().toString().split(" ")[4];

resultado 15:08:03

Para cualquiera que use AngularJS, una solución simple es filtrar el valor con la API de fecha , que convierte milisegundos en una cadena según el formato solicitado. Ejemplo:

<div>Offer ends in {{ timeRemaining | date: 'HH:mm:ss' }}</div>

Tenga en cuenta que esto espera milisegundos, por lo que es posible que desee multiplicar el tiempo restante por 1000 si está convirtiendo desde segundos (como se formuló la pregunta original).

Me encontré con el caso que algunos han mencionado donde el número de segundos es más de un día. Aquí hay una versión adaptada de la respuesta mejor calificada de @Harish Anchu que representa períodos más largos de tiempo:

function secondsToTime(seconds) {
  const arr = new Date(seconds * 1000).toISOString().substr(11, 8).split(':');

  const days = Math.floor(seconds / 86400);
  arr[0] = parseInt(arr[0], 10) + days * 24;

  return arr.join(':');
}

Ejemplo:

secondsToTime(101596) // outputs '28:13:16' as opposed to '04:13:16'

String.prototype.toHHMMSS = function () {
    var sec_num = parseInt(this, 10); // don't forget the second param
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    return hours+':'+minutes+':'+seconds;
}

Ejemplo de uso

alert("186".toHHMMSS());

Ninguna de las respuestas aquí satisface mis requisitos, ya que quiero poder manejar

1. Grandes cantidades de segundos (días), y
2. Números negativos

Aunque el OP no los requiere, es una buena práctica cubrir casos extremos, especialmente cuando requiere poco esfuerzo.

Es bastante obvio que el OP significa un NÚMERO de segundos cuando dice segundos . ¿Por qué vincularía tu función String?

function secondsToTimeSpan(seconds) {
    const value = Math.abs(seconds);
    const days = Math.floor(value / 1440);
    const hours = Math.floor((value - (days * 1440)) / 3600);
    const min = Math.floor((value - (days * 1440) - (hours * 3600)) / 60);
    const sec = value - (days * 1440) - (hours * 3600) - (min * 60);
    return `${seconds < 0 ? '-':''}${days > 0 ? days + '.':''}${hours < 10 ? '0' + hours:hours}:${min < 10 ? '0' + min:min}:${sec < 10 ? '0' + sec:sec}`
}
secondsToTimeSpan(0);       // => 00:00:00
secondsToTimeSpan(1);       // => 00:00:01
secondsToTimeSpan(1440);    // => 1.00:00:00
secondsToTimeSpan(-1440);   // => -1.00:00:00
secondsToTimeSpan(-1);      // => -00:00:01

He usado este código antes para crear un objeto de intervalo de tiempo simple:

function TimeSpan(time) {
this.hours = 0;
this.minutes = 0;
this.seconds = 0;

while(time >= 3600)
{
    this.hours++;
    time -= 3600;
}

while(time >= 60)
{
    this.minutes++;
    time -= 60;
}

this.seconds = time;
}

var timespan = new Timespan(3662);