使用JavaScript添加多个DateTime Duration字符串以获得总持续时间 [英] Add multiple DateTime Duration strings together using JavaScript to get total duration

问题描述

我有一个HTML表用于生成一个日历，显示用户每天工作和进出系统的TimeClock条目。每天还显示每个时钟输入/输出的总持续时间。 （多个timecard punches可以在同一天内）

简单地说，我有一个持有值的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值作为每个timeclock条目的格式 04:21:19 的字符串。

我的JavaScript / jQuery到目前为止...

在这里工作的演示：

---

我不反对使用 MomentJS 库 http://momentjs.com / 如果可以在这种情况下帮助，但是我迄今为止的研究并没有真正显示任何例子，我在这个问题上做了我需要做的事。

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

我找到了MomentJS插件 MomentJS Durations - < a href =https://github.com/jsmreese/moment-duration-format =nofollow noreferrer> 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） 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>总时间：< span class =totalVal>< / span>< / div> ;  

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 total time duration for each clock in/out entry. (multiple "timecard punches" can be within the same day)

Simply put I have DateTime style strings which hold a Duration value and I need to add them all together to get a combined duration value.

In a loop this JavaScript variable totalTimeValue will be assigned a duration value as a text string like this 03:31:23

Add these duration strings together using 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

---

Using JavaScript and jQuery I have this code below which gets the DateTime Duration value as a string in the format 04:21:19 for each timeclock entry.

My JavaScript/jQuery so far...
Demo of it working here: 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

---

I have no objection to using the MomentJS library http://momentjs.com/ if it can help in this situation however my research so far did not really show any examples doing what I need to do in this question.

In fact all my StackOverflow and Google searches resulted in no examples of adding durations like this in JavaScript!

I did find this MomentJS plugin MomentJS Durations - https://github.com/jsmreese/moment-duration-format

解决方案

With JQuery and Javascript its easily possible. Please have a look at below code.

$(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>

这篇关于使用JavaScript添加多个DateTime Duration字符串以获得总持续时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！