使用 JavaScript 将多个 DateTime Duration 字符串添加在一起以获得总持续时间

我有一个 HTML 表，用于生成日历，其中显示用户每天工作以及进出系统的 TimeClock 条目。每天还显示每次打卡上下班条目的总持续时间。 （同一天内可以多次“打卡”）

简而言之，我有 DateTime 样式字符串，其中包含一个持续时间值，我需要将它们全部加在一起以获得组合的持续时间值。

在循环中这个 JavaScript 变量totalTimeValue将被分配一个持续时间值作为文本字符串，如下所示03:31:23

使用 JavaScript 将这些持续时间字符串添加在一起...

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

使用 JavaScript 和 jQuery，我在下面的代码中获取了 DateTime Duration 值作为格式的字符串04:21:19对于每个时钟条目。

到目前为止我的 JavaScript/jQuery...
它的工作演示在这里：http://codepen.io/jasondavis/pen/GpPPPR?editors=101 http://codepen.io/jasondavis/pen/GpPPPR?editors=101

var totalTimeValue = 0;
var totalWeekTimeValue = 0;

// itterate each week which is table row <tr>
$('#timeclock-cal > tbody  > tr').each(function() {
  console.log('=== New Week ===');

  totalWeekTimeValue = 0;

  // get each day which is a table cell <td>
  $(this).find('td').each(function() {
    console.log('== New Day ==');

    // get total time val for each clock in/out on each day which is inside
    // button with CSS class .cal-punch-total-time
    $(this).find('.cal-punch-total-time').each(function() {

      totalTimeValue = $(this).text();

      console.log(totalTimeValue);

      // THIS PART NEEDS YOUR HELP!
      // NEED TO ADD EACH DATETIME STRING TOGETHER FOR TOTAL DURATION VALUES
      totalWeekTimeValue = totalTimeValue+totalWeekTimeValue;

    });

  });

  console.log('= total week time === '+totalWeekTimeValue);
});

full size image https://i.stack.imgur.com/ol53c.png

我不反对使用MomentJS图书馆http://momentjs.com/ http://momentjs.com/如果它可以在这种情况下有所帮助，但是到目前为止，我的研究并没有真正显示出任何例子来完成我在这个问题上需要做的事情。

事实上，我所有的 StackOverflow 和 Google 搜索都没有找到像这样在 JavaScript 中添加持续时间的示例！

我确实找到了这个 MomentJS 插件MomentJS 持续时间 - https://github.com/jsmreese/moment-duration-format https://github.com/jsmreese/moment-duration-format

使用 JQuery 和 Javascript，这很容易实现。请看下面的代码。

$(document).ready(function(){
    var pad = function(num) { return ("0"+num).slice(-2); }
    var totalSeconds = 0;
    $("li").each(function(){
        var currentDuration = $(this).text();
        currentDuration = currentDuration.split(":");
        var hrs = parseInt(currentDuration[0],10);
        var min = parseInt(currentDuration[1],10);
        var sec = parseInt(currentDuration[2],10);
        var currDurationSec = sec + (60*min) + (60*60*hrs); 
        totalSeconds +=currDurationSec;
    });
    

    var hours = Math.floor(totalSeconds / 3600);
	totalSeconds %= 3600;
	var minutes = Math.floor(totalSeconds / 60);
	var seconds = totalSeconds % 60;
  $(".totalVal").text(pad(hours)+":"+pad(minutes)+":"+pad(seconds));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
    <li>03:31:23</li>
    <li>04:21:56</li>
    <li>04:08:42</li>
    <li>03:31:17</li>
    <li>04:10:59</li>
    <li>02:48:21</li>
    <li>04:26:11</li>
    <li>00:00:39</li>
    <li>03:41:37</li>
</ul>

<div id="totalTime">Total Time:<span class="totalVal"></span></div>