使用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？编辑= 101

 var totalTimeValue = 0; var totalWeekTimeValue = 0; // itterate each week which is table row  $('#timeclock-cal > tbody > tr').each(function() { console.log('=== New Week ==='); totalWeekTimeValue = 0; // get each day which is a table cell  $(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); }); 

全尺寸图片

---

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

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

我确实找到了这个MomentJS插件MomentJS持续时间 – 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)); }); 

  
 
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
 
 
Total Time: 

Answer 2

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

  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 
 

Answer 3

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

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

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

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

这将为您提供totalWeekTime的值数组，您可以格式化/重新计算并在需要时重新加入。

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

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

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'