Add multiple DateTime Duration strings together using JavaScript to get total duration

Question

I have an HTML Table used to generate a Calendar which shows TimeClock entries for each day a user has worked and clocked in and out of the system. Each day also shows the

Answer 1

This is a little overkill, but shows how to use map and reduce.

/** Calculate the number of seconds from HH:MM:SS **/
function getSeconds(time) {
  var parts = time.split(":");
  return parseInt(parts[0], 10) * 3600 + parseInt(parts[1], 10) * 60 + parseInt(parts[2], 10);
}

//select all the elements
var totalSeconds = $("a.cal-punch-total-time")
    .map( function(ind, elem) { //convert the jQuery object into the array  
        var text = $(elem).text();  //get the text from the anchor
        return getSeconds(text);    //set the index to the total seconds
    })
    .get()  //gets the array out of the jQuery object
    .reduce( function(runningTotal, currentValue){  //Now to combine all the values into one
        return runningTotal + currentValue;  //sum up the values
    },0);  //The initial starting vaule

//Now get the hour, minutes, and seconds from the total seconds
var hours = parseInt( totalSeconds / 3600 );
var minutes = parseInt( totalSeconds / 60 ) % 60;
var seconds = totalSeconds % 60;

//left pad numbers less than ten
if(hours<10) hours = "0" + hours;
if(minutes<10) minutes = "0" + minutes;
if(seconds<10) seconds = "0" + seconds;


$("#out").html("Total Time: " + (hours + ":" + minutes + ":" + seconds));

03:31:23
04:21:56
04:08:42
03:31:17
04:10:59
02:48:21
04:26:11
00:00:39
03:41:37