变化时多行之间的时差和总和

Question

我正在尝试编写可以执行以下操作的代码：

1. 计算一行中两个type="time"元素之间的时差（采用HH：MM格式）。
2. 汇总文本输入中的总差异（采用HH：MM格式）。

我设法创建了一个由onchange事件触发的函数，但我的函数只考虑输入的第一个值，这意味着当你更新时间时，差异将被重新计算，总数将是错。



以下是我用于计算第一行的JavaScript代码：

function CalTime0() {
    var timeOfCall = $('#timefrom0').val(),
    timeOfResponse = $('#timeto0').val(),
    hours = timeOfResponse.split(':')[0] - timeOfCall.split(':')[0],
    minutes = timeOfResponse.split(':')[1] - timeOfCall.split(':')[1],
    total = $('#tbtotal').val(),
    tothours = total.split(':')[0],
    totminutes = total.split(':')[1];               
    minutes = minutes.toString().length<2?'0'+minutes:minutes;
    totminutes = totminutes.toString().length<2?'0'+totminutes:totminutes;

    if(minutes<0) { 
        hours--;
        minutes = 60 + minutes;
    }

    hours = hours.toString().length<2?'0'+hours:hours;
    tothours = tothours.toString().length<2?'0'+tothours:tothours;
    tothours = parseInt(tothours) + parseInt(hours);
    totminutes = parseInt(totminutes) + parseInt(minutes);

    if(totminutes >= 60) { 
        tothours++;
        totminutes = totminutes - 60;
    }

    $('#total0').val(hours + ':' + minutes);    
    $('#tbtotal').val(tothours + ':' + totminutes); 
}

Answer 1

作为建议，要更轻松地计算日期差异，请使用moment.js。日期差异计算应该可以用这样的东西替换，时刻：

moment(timeOfResponse).diff(moment(timeOfCall))

moment.js diff文档：http://momentjs.com/docs/#/displaying/difference/

Answer 2

解决方案是减去#total0字段代表#tbtotal字段所代表的时间。然后，您计算新的#total0字段，并再次将该时间添加到#tbtotal。这样，#tbtotal中显示的时间始终是正确的。

另一个问题似乎是如何为所有行执行此操作，而不仅仅是这一行。您可以使用this关键字来确定触发更改事件的元素。从那里你可以弄清楚其他元素是什么。为此，我将字段重命名为timefr0和timeto0，因此它们的长度相等。

我冒昧地将所有时间都转换为秒，并以这种方式操纵它们。脚本中的评论应该代表自己。

function updateTotals() {
  //Get num part of the id from current set
  //Cheated a bit with the id names ;-)
  var num = $(this).attr('id').substr( 6 );

  //Get the time from each and every one of them
  var tfrom = $('#timefr' + num ).val().split(':');
  var tto = $('#timeto' + num ).val().split(':');
  var currtotal = $('#total' + num ).val().split(':');
  var grandtotal = $('#tbtotal').val().split(':');

  //Convert to seconds and do the calculations the easy way
  var diff = (tto[0] - tfrom[0]) * 3600 + (tto[1] - tfrom[1]) * 60;
  var totalsec = currtotal[0] * 3600 + currtotal[1] * 60;
  var grandtotalsec = grandtotal[0] * 3600 + grandtotal[1] * 60;

  //If the result is negative, we can't do anything sensible. Use 0 instead.
  if( diff < 0 ) {
    diff = 0;
  }

  //Substract what we calculated last time
  grandtotalsec -= totalsec;
  //Then add the current diff
  grandtotalsec += diff;

  //Convert diff (or total) into human readable form
  var hours = Math.floor( diff / 3600 );
  diff = diff % 3600;
  var minutes = Math.floor( diff / 60 );

  hours = (hours < 10) ? "0" + hours.toString() : hours.toString();
  minutes = (minutes < 10) ? "0" + minutes.toString() : minutes.toString();


  //Convert grandtotal into human readable form
  var grandtotalhours = Math.floor( grandtotalsec / 3600 );
  grandtotalsec = grandtotalsec % 3600;
  var grandtotalminutes = Math.floor( grandtotalsec / 60 );

  grandtotalhours = (grandtotalhours < 10) ? "0" + grandtotalhours.toString() : grandtotalhours.toString();
  grandtotalminutes = (grandtotalminutes < 10) ? "0" + grandtotalminutes.toString() : grandtotalminutes.toString();  

  //Put them in the fields
  $( '#total' + num ).val( hours + ":" + minutes );
  $( '#tbtotal' ).val( grandtotalhours + ":" + grandtotalminutes );
}

可以找到一个示例小提琴here。