Convert seconds to HH-MM-SS with JavaScript

Question

How can I convert seconds to an HH-MM-SS string using JavaScript

User · Answer

Here is a function to convert seconds to hh-mm-ss format based on powtac's answer here

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

Example use

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

User · Answer

None of the answers here satisfies my requirements as I want to be able to handle   Large numbers of seconds  days   and 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  lt  0    -       days  gt  0   days            hours  lt  10    0    hours hours    min  lt  10    0    min min    sec  lt  10    0    sec sec     secondsToTimeSpan 0              gt  00 00 00 secondsToTimeSpan 1              gt  00 00 01 secondsToTimeSpan 1440           gt  1 00 00 00 secondsToTimeSpan -1440          gt  -1 00 00 00 secondsToTimeSpan -1             gt  -00 00 01

User · Answer

--update 2 Please use  Frank s a one line solution  new Date SECONDS   1000  toISOString   substr 11  8   It is by far the best solution

User · Answer

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  lt  10  amp  amp  MONTH toString   length  lt  2          strMONTH    0    MONTH      else         strMONTH MONTH      if parseInt DAY  lt  10  amp  amp  DAY toString   length  lt  2          strDAY    0    DAY      else         strDAY DAY      if parseInt HOUR  lt  10  amp  amp  HOUR toString   length  lt  2          strHOUR    0    HOUR      else         strHOUR HOUR      if parseInt MINUTES  lt  10  amp  amp  MINUTES toString   length  lt  2          strMINUTES    0    MINUTES      else         strMINUTES MINUTES      if parseInt SECONDS  lt  10  amp  amp  SECONDS toString   length  lt  2          strSECONDS    0    SECONDS      else         strSECONDS SECONDS       switch  formatString           case  hh mm ss               return strHOUR         strMINUTES         strSECONDS          break            More cases to meet your requirements

User · Answer

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

User · Answer

Try this   function toTimeString seconds      return  new Date seconds   1000   toUTCString   match    d d  d d  d d    0

User · Answer

I just wanted to give a little explanation to the nice answer above   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  lt  10    0    hours   hours     -     minutes  lt  10    0    minutes   minutes     -     seconds   lt  10    0    seconds   seconds     On the second line  since there are 3600 seconds in 1 hour  we divide the total number of seconds by 3600 to get the total number of hours  We use parseInt to strip off any decimal  If totalSec was 12600  3 and half hours   then parseInt  totalSec   3600   would return 3  since we will have 3 full hours  Why do we need the   24 in this case  If we exceed 24 hours  let s say we have 25 hours  90000 seconds   then the modulo here will take us back to 1 again  rather than returning 25  It is confining the result within a 24 hour limit  since there are 24 hours in one day    When you see something like this   25   24   Think of it like this   25 mod 24 or what is the remainder when we divide 25 by 24

User · Answer

You can manage to do this without any external JavaScript library with the help of JavaScript Date method like following   var date   new Date null   date setSeconds SECONDS      specify value for SECONDS here var result   date toISOString   substr 11  8     Or  as per  Frank s comment  a one liner   new Date SECONDS   1000  toISOString   substr 11  8

User · Answer

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    lt  10   hours      0  hours       if  minutes  lt  10   minutes    0  minutes       if  seconds  lt  10   seconds    0  seconds       var time      hours     minutes     seconds      return time     alert  5678  toHHMMSS           01 34 38  console log timeInSec toHHMMSS          00 11 01    we can make this function lot shorter and crisp but that decreases the readability  so we will write it as simple as possible and as stable as possible    or you can check this working here

User · Answer

You can also use Sugar   Date create   reset   set  seconds  180   format   mm   ss       This example returns  03 00

User · Answer

I ve used this code before to create a simple timespan object   function TimeSpan time    this hours   0  this minutes   0  this seconds   0   while time  gt   3600        this hours        time -  3600     while time  gt   60        this minutes        time -  60     this seconds   time     var timespan   new Timespan 3662

User · Answer

I don t think any built-in feature of the standard Date object will do this for you in a way that s more convenient than just doing the math yourself   hours   Math floor totalSeconds   3600   totalSeconds    3600  minutes   Math floor totalSeconds   60   seconds   totalSeconds   60    Example    x000D   x000D  let totalSeconds   28565  x000D  let hours   Math floor totalSeconds   3600   x000D  totalSeconds    3600  x000D  let minutes   Math floor totalSeconds   60   x000D  let seconds   totalSeconds   60  x000D   x000D  console log  hours      hours   x000D  console log  minutes      minutes   x000D  console log  seconds      seconds   x000D   x000D     If you want strings with leading zeroes  x000D  minutes   String minutes  padStart 2   0    x000D  hours   String hours  padStart 2   0    x000D  seconds   String seconds  padStart 2   0    x000D  console log hours         minutes         seconds   x000D   x000D   x000D

User · Answer

Have you tried adding seconds to a Date object  Date prototype addSeconds   function seconds        this setSeconds this getSeconds     seconds      var dt   new Date    dt addSeconds 1234    A sample  https   jsfiddle net j5g2p0dc 5  Updated  Sample link was missing so I created a new one

User · Answer

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

User · Answer

For anyone using AngularJS  a simple solution is to filter the value with the date API  which converts milliseconds to a string based on the requested format  Example    lt div gt Offer ends in    timeRemaining   date   HH mm ss     lt  div gt    Note that this expects milliseconds  so you may want to multiply timeRemaining by 1000 if you are converting from seconds  as the original question was formulated

User · Answer

For the special case of HH MM SS MS  eq   quot 00 04 33 637 quot   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    x000D   x000D     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       gt        timerToSec t       s        Test  25473 seconds and 637 milliseconds    const s   25473 637     25473 637  console log    s    s   gt         secToTimer s    x000D   x000D   x000D   Example usage  a milliseconds transport timer   x000D   x000D     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        gt      job   requestAnimationFrame timer    OUT textContent   secToTimer  new Date   getTime   - origin    1000     requestAnimationFrame timer  x000D  span  font-size 4rem  x000D   lt span id  OUT  gt  lt  span gt   lt br gt   lt button onclick  origin   new Date   getTime    gt RESET lt  button gt   lt button onclick  requestAnimationFrame timer   gt RESTART lt  button gt   lt button onclick  cancelAnimationFrame job   gt STOP lt  button gt  x000D   x000D   x000D   Example usage  binded to a media element  x000D   x000D     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  x000D  span  font-size 4rem  x000D   lt span id  OUT  gt  lt  span gt  lt br gt   lt video id  VIDEO  width  400  controls autoplay gt     lt source src  https   www w3schools com html mov bbb mp4  type  video mp4  gt   lt  video gt  x000D   x000D   x000D    Outside the question  those functions written in php   lt  php     HH MM SS to  FLOAT seconds ------------------   function timerToSec  timer      vtimer   explode  quot   quot   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  quot   quot   date  quot H i s quot    sec   0

User · Answer

This does the trick   function secondstotime secs        var t   new Date 1970 0 1       t setSeconds secs       var s   t toTimeString   substr 0 8       if secs  gt  86399          s   Math floor  t - Date parse  1 1 70      3600000    s substr 2       return s       Sourced from here

User · Answer

Here s a simple function for converting times that might help function formatSeconds seconds        var date   new Date 1970 0 1       date setSeconds seconds       return date toTimeString   replace      d 2   d 2   d 2        quot  1 quot

User · Answer

After looking at all the answers and not being happy with most of them  this is what I came up with   I know I am very late to the conversation  but here it is anyway   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      I create a new Date object  change the time to my parameters  convert the Date Object to a time string  and removed the additional stuff by splitting the string and returning only the part that need   I thought I would share this approach  since it removes the need for regex  logic and math acrobatics to get the results in  HH mm ss  format  and instead it relies on built in methods   You may want to take a look at the documentation here   https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Date

User · Answer

This function should do it    var convertTime   function  input  separator        var pad   function input   return input  lt  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              Without passing a separator  it uses   as the  default  separator    time   convertTime 13551 9941351      -- gt  OUTPUT   03 45 51   If you want to use - as a separator  just pass it as the second parameter   time   convertTime 1126 5135155   -       -- gt  OUTPUT   00-18-46   See also this Fiddle

User · Answer

I know this is kinda old  but     ES2015   var toHHMMSS    secs    gt        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   gt  v  lt  10    0    v   v           filter  v i    gt  v      00     i  gt  0           join          It will output   toHHMMSS 129600     36 00 00 toHHMMSS 13545     03 45 45 toHHMMSS 180     03 00 toHHMMSS 18     00 18

User · Answer

Chiming in on this old thread -- the OP stated HH MM SS  and many of the solutions work  until you realize you need more than 24 hours listed   And maybe you don t want more than a single line of code   Here you go   d  s   gt  f Math floor g  n   gt   00  n  slice -2  return f s 3600      g f s 60  60      g s 60     It returns H  MM SS   To use it  simply use   d 91260          returns  25 21 00  d 960            returns  0 16 00       I tried to get it to  use the least amount of code possible  for a nice one-liner approach

User · Answer

Easy to follow version for noobies    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  lt  10    0    hours   hours           minutes  lt  10    0    minutes   minutes           seconds   lt  10    0    seconds   seconds    console log result

User · Answer

below is the given code which will convert seconds into hh-mm-ss format   var measuredTime   new Date null   measuredTime setSeconds 4995      specify value of SECONDS var MHSTime   measuredTime toISOString   substr 11  8     Get alternative method from Convert seconds to HH-MM-SS format in JavaScript

User · Answer

As Cleiton pointed out in his answer  moment js can be used for this   moment   startOf  day            seconds 15457           format  H mm ss

User · Answer

Here is an extension to Number class  toHHMMSS   converts seconds to an hh mm ss string   x000D   x000D  Number prototype toHHMMSS   function     x000D    var hours   Math floor this   3600   lt  10     00    Math floor this   3600   slice -2    Math floor this   3600   x000D    var minutes     00    Math floor  this   3600    60   slice -2   x000D    var seconds     00     this   3600    60  slice -2   x000D    return hours         minutes         seconds  x000D    x000D   x000D     Usage   number variable  toHHMMSS    x000D   x000D     Here is a simple test x000D  var totalseconds   1234  x000D  document getElementById  timespan   innerHTML   totalseconds toHHMMSS    x000D     HTML of the test x000D   lt div id  timespan  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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    lt  10   hours      0  hours       if  minutes  lt  10   minutes    0  minutes       if  seconds  lt  10   seconds    0  seconds       return hours     minutes     seconds      Usage Example   alert  186  toHHMMSS

User · Answer

There are lots of options of solve this problem  and obvious there are good option suggested about  But I wants to add one more optimized code here  function formatSeconds sec         return   sec   3600     sec   3600    60     sec   3600    60                map v   gt  v  lt  10    0    parseInt v    parseInt v                filter  i  j    gt  i      00     j  gt  0               join           if you don t wants formatted zero with less then 10 number  you can use  function formatSeconds sec      return parseInt sec   3600          parseInt  sec   3600    60          parseInt  sec   3600    60        Sample Code http   fiddly org 1c476 1

User · Answer

In one line  using T J  Crowder s solution    secToHHMMSS   seconds   gt     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   gt     parseInt seconds   86400  d   new Date seconds   1000  toISOString   substr 11  8      Source   https   gist github com martinbean 2bf88c446be8048814cf02b2641ba276

User · Answer

You can also use below code   int ss   nDur 60  nDur     nDur 60  int mm   nDur 60  int hh   nDur 60

[javascript] Convert seconds to HH-MM-SS with JavaScript?

Examples related to javascript

Examples related to date

Examples related to time

Examples related to date-format

Examples related to time-format