I think the most general (and cryptic) solution could be this

function hms(seconds) {
  return [3600, 60]
    .reduceRight(
      (pipeline, breakpoint) => remainder =>
        [Math.floor(remainder / breakpoint)].concat(pipeline(remainder % breakpoint)),
      r => [r]
    )(seconds)
    .map(amount => amount.toString().padStart(2, '0'))
    .join('-');
}

Or to copy & paste the shortest version

function hms(seconds) {
  return [3600, 60]
    .reduceRight(
      (p, b) => r => [Math.floor(r / b)].concat(p(r % b)),
      r => [r]
    )(seconds)
    .map(a => a.toString().padStart(2, '0'))
    .join('-');
}

Some example outputs:

> hms(0)
< "00-00-00"

> hms(5)
< "00-00-05"

> hms(60)
< "00-01-00"

> hms(3785)
< "01-03-05"

> hms(37850)
< "10-30-50"

> hms(378500)
< "105-08-20"

How it works

Algorithm

1. To get hours you divide total seconds by 3600 and floor it.
2. To get minutes you divide remainder by 60 and floor it.
3. To get seconds you just use the remainder.

It would also be nice to keep individual amounts in an array for easier formatting.

For example given the input of 3785s the output should be [1, 3, 5], that is 1 hour, 3 minutes and 5 seconds.

Creating pipeline

Naming the 3600 and 60 constants "breakpoints" you can write this algorithm into function as this

function divideAndAppend(remainder, breakpoint, callback) {
  return [Math.floor(remainder / breakpoint)].concat(callback(remainder % breakpoint));
}

It returns an array where first item is the amount for given breakpoint and the rest of the array is given by the callback. Reusing the divideAndAppend in callback function will give you a pipeline of composed divideAndAppend functions. Each one of these computes amount per given breakpoint and append it to the array making your desired output.

Then you also need the "final" callback that ends this pipeline. In another words you used all breakpoints and now you have only the remainder. Since you have already the answer at 3) you should use some sort of identity function, in this case remainder => [remainder].

You can now write the pipeline like this

let pipeline = r3 => divideAndAppend(
    r3, 
    3600, 
    r2 => divideAndAppend(
        r2, 
        60, 
        r1 => [r1]));

> pipeline(3785)
< [1, 3, 5]

Cool right?

Generalizing using for-loop

Now you can generalize with a variable amount of breakpoints and create a for-loop that will compose individial divideAndAppend functions into the pipeline. You start with the identity function r1 => [r1], then use the 60 breakpoint and finally use the 3600 breakpoint.

let breakpoints = [60, 3600];
let pipeline = r => [r];

for (const b of breakpoints) {
  const previousPipeline = pipeline;
  pipeline = r => divideAndAppend(r, b, previousPipeline);
}

> pipeline(3785)
< [1, 3, 5]

Using Array.prototype.reduce()

Now you can rewrite this for-loop into reducer for shorter and more functional code. In other words rewrite function composition into the reducer.

let pipeline = [60, 3600].reduce(
  (ppln, b) => r => divideAndAppend(r, b, ppln),
  r => [r]
);

> pipeline(3785)
< [1, 3, 5]

The accumulator ppln is the pipeline and you are composing it using the previous version of it. The initial pipeline is r => [r].

You can now inline the function divideAndAppend and use Array.prototype.reduceRight which is the same as [].reverse().reduce(...) to make the breakpoints definitions more natural.

let pipeline = [3600, 60]
    .reduceRight(
      (ppln, b) => r => [Math.floor(r / b)].concat(ppln(r % b)),
      r => [r]
    );

Which is the final form. Then you just appy mapping to string with padded 0's on left and join the strings with : separator;

More generalizations

Wrapping the reducer into function

function decompose(total, breakpoints) {
  return breakpoints.reduceRight(
    (p, b) => r => [Math.floor(r / b)].concat(p(r % b)),
    r => [r]
  )(total);
}

> decompose(3785, [3600, 60])
< [1, 3, 5]

you now have very general algorithm you can work with. For example:

Convert easily (the weird) us length standards

Given the standards

> decompose(123_456, [1760 * 3 * 12, 3 * 12, 12])
< [1, 1669, 1, 0]

123456 in = 1 mi, 1669 yd, 1 feet and 0 in

Or you can somewhat convert to decimal or binary representations

> decompose(123_456, [100_000, 10_000, 1000, 100, 10])
< [1, 2, 3, 4, 5, 6]

> decompose(127, [128, 64, 32, 16, 8, 4, 2])
< [0, 1, 1, 1, 1, 1, 1, 1]

Works also with floating point breakpoints

Since Javascript supports mod operator with floating point numbers, you can also do

> decompose(26.5, [20, 2.5])
< [1, 2, 1.5]

The edge case of no breakpoints is also naturally covered

> decompose(123, [])
< [123]

For the special case of HH:MM:SS.MS (eq: "00:04:33.637") as used by FFMPEG to specify milliseconds.

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

HH expresses the number of hours, MM the number of minutes for a maximum of 2 digits, and SS the number of seconds for a maximum of 2 digits. The m at the end expresses decimal value for 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)
)

Example usage, a milliseconds transport timer:

/* 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>

Example usage, binded to a media element

/* 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>

Outside the question, those functions written in 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];  
}

In one line, using T.J. Crowder's solution :

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

In one line, another solution that also count days :

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

Source : 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));

None of the answers here satisfies my requirements as I want to be able to handle

1. Large numbers of seconds (days), and
2. Negative numbers

Although those are not required by the OP, it's good practice to cover edge cases, especially when it takes little effort.

It's pretty obvious is that the OP means a NUMBER of seconds when he says seconds. Why would peg your function on 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

Simple function to convert seconds into in hh:mm:ss format :

function getHHMMSSFromSeconds(totalSeconds) {
    if (!totalSeconds) {
      return '00:00:00';
    }
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor(totalSeconds % 3600 / 60);
    const seconds = totalSeconds % 60;
    const hhmmss = padTo2(hours) + ':' + padTo2(minutes) + ':' + padTo2(seconds);
    return hhmmss;
}

// function to convert single digit to double digit
function padTo2(value) {
    if (!value) {
      return '00';
    }
    return value < 10 ? String(value).padStart(2, '0') : value;
}

I ran into the case some have mentioned where the number of seconds is more than a day. Here's an adapted version of @Harish Anchu's top-rated answer that accounts for longer periods of time:

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(':');
}

Example:

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;
}

Usage Example

alert("186".toHHMMSS());

When I picture a clock or a timer, I would do it as shown below:

const secondsTo_HHMMSS = (seconds) => {
      //format to a readable friendly timer
      let hour = Math.floor(seconds / 3600);
      let minute = Math.floor((seconds % 3600) / 60);
      let second = seconds % 60;

      if(hour.toString().length === 1) {
            hour = `0${hour}`;
      }
      if(minute.toString().length === 1) {
            minute = `0${minute}`;
      }
      if(second.toString().length === 1) {
            second = `0${second}`;
      };

      let timer = `${hour}-${minute}-${second}`;

      return timer;
}

Already many answers, but my requirements were:

• convert to duration (i.e., should work for values larger than 24 hours)
• care about the decimals of seconds up to given decimal precision
• truncate the preceding hours and mins if zero.

const seconds2duration = ( seconds, decimals=0 ) => {
    let fraction = ( seconds - Math.floor( seconds ) ).toFixed( decimals );
    fraction = decimals === 0 ? '' : fraction.slice( 1 );
    const [ hours, mins, secs ] = [ seconds / 3600, seconds % 3600 / 60, seconds % 3600 % 60 ].map( ( x ) => String( Math.floor( x ) ).padStart( 2, '0' ) );
    if ( hours === '00' && mins === '00' ) {
        return secs + fraction;
    } else if ( hours === '00' ) {
        return [ mins, secs + fraction ].join( ':' );
    } else {
        return [ hours, mins, secs + fraction ].join( ':' );
    }
};

console.log(seconds2duration(25*3600 + 0*60 + 41 + 0.333, 0)); // 25:00:41
console.log(seconds2duration(0*3600 + 5*60 + 41 + 0.333, 0)); // 05:41
console.log(seconds2duration(0*3600 + 5*60 + 41 + 0.333, 1)); // 05:41.3
console.log(seconds2duration(0*3600 + 0*60 + 41 + 0.333, 2)); // 41.33

A good option could be to use Intl.DateTimeFormat. Example:

const timeFormat = new Intl.DateTimeFormat('es-US', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hour12: false,
    timeZone: 'UTC'
});

const endTimeFormatted = timeFormat.format(new Date(SECS * 1000); //hour in secs

You can use ES6 generator to create highly customizable time strings.

Here is the general function to convert a number to an array from a given scale:

function toScaledArray(n,scales){
  function* g(x, n=0){
    if(x>0) {
      yield x%(scales[n]||Infinity);
      yield* g(Math.floor(x/scales[n]),n+1)
    }
  }
  return [...g(n)]
}

console.log(toScaledArray(6,[10,10]))
console.log(toScaledArray(2000,[30,12]))
console.log(toScaledArray(45000,[24,30,12]))

So, we can use it to create time strings as follows:

> toScaledArray(45000,[60,60]).reverse().join(":")
< '12:30:0'
> toScaledArray(1234,[60,60]).reverse().join(":")
< '20:34'

The function can be also written in one line:

[...(function* g(x,n=0,scales=[60,60]){if(x>0) {yield x%(scales[n]||Infinity); yield* g(Math.floor(x/scales[n]),n+1,scales)}})(45000)].reverse().join("-")

Functions above will omit the leading zeros, if you want to convert a string into precisely 'HH-MM-SS', you can use

[...(function* g(x,n=0,scales=[60,60]){if(x>0||n<3) {yield x%(scales[n]||Infinity); yield* g(Math.floor(x/scales[n]),n+1,scales)}})(45000)].reverse().map(x=>String(x).padStart(2, '0')).join("-")

Also, if what you need is '[H:]MM:SS', here we have:

Number.prototype.toTimeString = function(){
  return [...(function* g(x,n=0,scales=[60,60]){if(x>0||n<2) {yield x%(scales[n]||Infinity); yield* g(Math.floor(x/scales[n]),n+1,scales)}})(this)].map((x,n)=>n<2?String(x).padStart(2,'0'):x).reverse().join(":")
}

console.log(12,(12).toTimeString())
console.log(345,(345).toTimeString())
console.log(6789,(6789).toTimeString())

and you can also have D(ay) or even M(onth) and Y(ear) (not precisely though) as follows:

> toScaledArray(123456789,[60,60,24,30,12]).map((x,n)=>n<2?String(x).padStart(2,'0'):x).reverse().join(":")
< '3:11:18:21:33:09'

Here the output means "3 years 11 months 18 days 21 hours 33 minutes and 9 seconds"

In conclusion, this is a highly customizable way to convert a number into scaled arrays, which can be used in time string conversion, human readable byte conversion or even change for paper money.

You can also use Sugar.

Date.create().reset().set({seconds: 180}).format('{mm}:{ss}');

This example returns '03:00'.