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

Question

我有一个 HTML Table 用于生成一个日历，它显示用户每天工作和进出系统的时钟条目。每天还显示每个时钟 in/out 条目的总持续时间。 (多个"timecard punches"可以在同一天)

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

在一个循环中，这个 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 我有下面的代码，它以 04:21:19 格式的字符串获取 DateTime Duration 值每个时钟条目。

我的 JavaScript/jQuery 到目前为止...
它在这里工作的演示：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

我不反对使用 MomentJS 库 http://momentjs.com/ 如果它可以在这种情况下提供帮助，但是到目前为止我的研究并没有真正展示任何例子做我本题需要做的事情

事实上，我所有的 Whosebug 和 Google 搜索都没有在 JavaScript!

中找到像这样添加持续时间的示例

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

Answer 1

使用 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>

Answer 2

您可以将 DateTime 字符串拆分为数组。

totalTimeValue = $(this).text().split(':'); //from '03:10:30' to ['03','10','30']

然后遍历数组并将每个字符串强制转换为一个数字。

totalTimeValue.forEach(function(val,idx){
    totalWeekTimeValue[idx] += Number(val);
  });

这将为您留下一组 totalWeekTime 值，您可以 format/recalculate 并在需要时重新加入。

totalWeekTimeValue.join(':'); //[3:10:30]

http://codepen.io/hirechrismeyers/pen/ZbVVgr

Answer 3

这有点矫枉过正，但展示了如何使用 map 和 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));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="cal-punch-total-time">03:31:23</a>
<a class="cal-punch-total-time">04:21:56</a>
<a class="cal-punch-total-time">04:08:42</a>
<a class="cal-punch-total-time">03:31:17</a>
<a class="cal-punch-total-time">04:10:59</a>
<a class="cal-punch-total-time">02:48:21</a>
<a class="cal-punch-total-time">04:26:11</a>
<a class="cal-punch-total-time">00:00:39</a>
<a class="cal-punch-total-time">03:41:37</a>
<div id="out"></div>

Answer 4

试试这个：

function hhmmssToSeconds(str)  {
    var arr = str.split(':').map(Number);
    return (arr[0] * 3600) + (arr[1] * 60) + arr[2];
};

function secondsToHHMMSS(seconds) {
    var hours = parseInt(seconds / 3600, 10),
        minutes = parseInt((seconds / 60) % 60, 10),
        seconds = parseInt(seconds % 3600 % 60, 10);

    return [hours, minutes, seconds].map(function (i) { return i.toString().length === 2 ? i : '0' + i; }).join(':');
}

然后：

var t1 = hhmmssToSeconds('40:50:40'),
    t2 = hhmmssToSeconds('04:12:30');

var result = secondsToHHMMSS(t1 + t2); // '45:03:10'

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

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

javascript

jquery

datetime

duration

momentjs