Convert seconds to HH-MM-SS with JavaScript?

问题:

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

回答1:

Don\'t you know datejs? it is a must know.

Using datejs, just write something like:

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

--update

Nowadays date.js is outdated and not maintained, so use \"Moment.js\", which is much better as pointed out by T.J. Crowder.

回答2:

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

回答3:

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:

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

回答4:

As Cleiton pointed out in his answer, moment.js can be used for this:

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

回答5:

I know this is kinda old, but...

ES2015:

var toHHMMSS = (secs) => {
    var sec_num = parseInt(secs, 10)    
    var hours   = Math.floor(sec_num / 3600) % 24
    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(\":\")
}

It will output:

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

回答6:

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

回答7:

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 > 86399)
        s = Math.floor((t - Date.parse(\"1/1/70\")) / 3600000) + s.substr(2);
    return s;
}

(Sourced from here)

回答8:

Try this:

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

回答9:

     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\"

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:

回答10:

Here is an extension to Number class. toHHMMSS() converts seconds to an hh:mm:ss string.

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>

回答11:

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 < 10 ? \"0\" + hours : hours) + \":\" + (minutes < 10 ? \"0\" + minutes : minutes) + \":\" + (seconds  < 10 ? \"0\" + seconds : seconds);
 console.log(result);

回答12:

This function should do it :

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

Without passing a separator, it uses : as the (default) separator :

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

If you want to use - as a separator, just pass it as the second parameter:

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

See also this Fiddle.

回答13:

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

回答14:

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

回答15:

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 < 10 ? \"0\" + hours : hours) + \"-\" + (minutes < 10 ? \"0\" + minutes : minutes) + \"-\" + (seconds  < 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

回答16:

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)=>{f=Math.floor;g=(n)=>(\'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.

回答17:

Have you tried adding seconds to a Date object?

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.

回答18:

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

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

Example use

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

回答19:

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

回答20:

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 => v < 10 ? \"0\" + parseInt(v) : parseInt(v))
            .filter((i, j) => i !== \"00\" || j > 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

回答21:

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

回答22:

You can also use below code:

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

回答23:

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:

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

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).

回答24:

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 >= 3600)
{
    this.hours++;
    time -= 3600;
}

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

this.seconds = time;
}

var timespan = new Timespan(3662);

回答25:

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

result 15:08:03

回答26:

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

回答27:

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\'

回答28:

You can also use Sugar.

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

This example returns \'03:00\'.

回答29:

using momentjs for singleday calculation

var number = 10000(milliseconds); 
var momentObject = moment.duration(number);  

var output =  momentObject.hours()+\"HH\"+momentObject.minutes()+\"MM\"+minuteObject.seconds()+\"S\" 

回答30:

Using Moment.js:

moment().format(\'hh:mm:ss\');