Convert ticks to time format (hh:mm:ss)

Question

I am getting a video length value as ticks from web server. I want to display it in a "hh:mm:ss" format. How can I do this in JavaScript?

Solution 1

Assuming that ticks are in seconds (you can convert them to seconds first if they aren't), you can get to the desired format by finding the number of whole minutes and hours in the time span, then taking the remaining seconds. The modulo operator is useful here, as is the fact that an hour is 3600 seconds, and a minute is 60 seconds:

function displayTime(ticksInSecs) {
    var ticks = ticksInSecs;
    var hh = Math.floor(ticks / 3600);
    var mm = Math.floor((ticks % 3600) / 60);
    var ss = ticks % 60;

    alert( pad(hh, 2) + ":" + pad(mm, 2) + ":" + pad(ss, 2) );
}

function pad(n, width) {
    var n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
}

See this answer for how to pad a number with leading zeros in JS (the method above is derived from this answer).

Solution 2

This is an old question, but I was not happy with any of the answers.

There are 3 issues here:

• Converting the tick size to seconds
• Extracting the hours, minutes and seconds from a duration in seconds
• Formatting the numbers to have 2 digits

Part 1 - Ticks

Tick sizes for media come in many durations, so some assumptions need to be made in order to answer the question.

As the desired answer is in seconds, minutes and hours, the first step is to convert the "tick" value to seconds.

 seconds = ticks / tickspersecond

For example, if the ticks were in milliseconds, then the conversion would be

 seconds = ticks / 1000

Part 2 - extracting hour, minute & second

• hour = seconds / secondsperhour => hour = seconds / 3600
• minute = seconds / secondsperminute modulus minutesperhour => minute = (seconds / 60) % 60)
• second = seconds modulus secondsperminute => second = seconds % 60

Part 3 - formatting

• There are a number of ways to format leading zeros on numbers, this one will use a simple function specific to this example (max of 2 digits).

e.g.

function pad2(number){
   number = '0' + number;
   return number.substr(number.length - 2);
}

Note: Due to floating point errors, you need to apply Math.floor to both the hour and minute values. You could put Math.floor into the pad2 function if you want to shorten the main code.

The final answer becomes:

// Assume milliseconds for now
var seconds = ticks / 1000; 
var hour = Math.floor(seconds / 3600);
var minute = Math.floor((seconds / 60) % 60);
var second = seconds % 60;

var result = pad2(hour) + ':' + pad2(minute) + ':' + pad2(second)

Note: For the sake of the demo I added % 24 (modulus hoursperday) to the hours display as the hours since 1971 is a "big" number - so will not format to 2 decimal places :)

JSfiddle Demo: https://jsfiddle.net/TrueBlueAussie/x2s77gzu/

or if you want to put Math.floor in the pad2 https://jsfiddle.net/TrueBlueAussie/x2s77gzu/1/

Solution 3

Assuming the ticks are in javascript format (milliseconds since midnight Jan 1, 1970):

var date = ticks.toISOString(); // gives e.g. 2015-10-06T16:34:23.062Z
var time = date.substring(11,19);  // 16:34:23

http://www.w3schools.com/jsref/jsref_toisostring.asp

EDIT:

Solution 4

You'll need the following code:

//define ticks
var ticks = {...};

//get seconds from ticks
var ts = ticks / 1000;

//conversion based on seconds
var hh = Math.floor( ts / 3600);
var mm = Math.floor( (ts % 3600) / 60);
var ss = (ts % 3600) % 60;

//prepend '0' when needed
hh = hh < 10 ? '0' + hh : hh;
mm = mm < 10 ? '0' + mm : mm;
ss = ss < 10 ? '0' + ss : ss;

//use it
var str = hh + ":" + mm + ":" + ss;
console.log(str);

View more solutions

Comments

[Kees C. Bakker]

toISOString is not supported by all browsers: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

[Kees C. Bakker]

Looks like this script assumes ticks are in seconds.

[Gone Coding]

There are numerous tick sizes for video length e.g. codesequoia.wordpress.com/2008/11/30/… Seconds (which this assumes) is not usually one of them as that is way too coarse a measurement.

[Gone Coding]

At least this answer declares an assumption about the size of the ticks :)

[Gone Coding]

Q: Assuming it was seconds, can't the last line just be var ss = ticks % 60;?

[Gone Coding]

Q: Assuming it was milliseconds, can't the ss calculation just be var ss = ts % 60;?

[nbrooks]

@TrueBlueAussie It's safe to assume that seconds were the appropriate unit in this case, since OP accepted the answer. Since it was being displayed as "hh:mm:ss" I assumed seconds were what was available (since that's the precision of the display format). Speculating as to what the OP may have wanted is irrelevant though, since this did the trick. To your second question: ticks % 60 doesn't work, since that double counts the seconds already accounted for by the hh and mm variables.

[Gone Coding]

It is not safe to assume anything and no assumptions were stated. 1 tick == 1 second would be very unusual. More likely the OP used this answer as a guide and did the conversion themselves. Re the % 60: since when does the modulus operator "double-count" anything? It is simply the remaining seconds after dividing by seconds per minute :)

[nbrooks]

@TrueBlueAussie It's "safe to assume" by virtue of the fact that they accepted this answer. If they tweaked it for their purposes, all the better. If there were additional requirements given, I would've addressed them. In the absence of that, I gave an answer based on my own assumption. Feel free to modify for your purposes. You're right about the ss variable though: I was approaching it from the perspective of excluding the other variables, but it is simpler to just say ticks % 60 since that excludes values of 60 or greater (that would have been accounted for as minutes). Nice catch!

[Mrchief]

toISOString is part of Date object. JavaScript ticks are numbers.