Question

我的文本文件有内容，示例一行： 764#00:03:12.037300#00:04:12.123000
然后我想在表格中显示。我知道如何将它显示到表格使用jQuery，如下所示：

JQUERY

$("#upload").click(function() {
    if (($("#fileUpload").val())) {
        if (typeof (FileReader) != "undefined") {
            var reader = new FileReader();
            reader.onload = function (e) {
                var rows = e.target.result.split("\n");
                for (var i = 0; i < rows.length; i++) {
                    var row = $("<tr />");
                    var cells = rows[i].split("#");
                    for (var j = 0; j < cells.length; j++) {
                        var cell = $("<td />");
                        cell.html(cells[j]);
                        row.append(cell);
                    }
                    $('#sampleTbl tbody').append(row);
                }
            }
            reader.readAsText($("#fileUpload")[0].files[0]);
        } else {
            alert("This browser does not support HTML5.");
        }
    } else {
        alert("Please upload a valid CSV file.");
    }
});

而且，这是我的html表：

<table id="sampleTbl", class="table table-striped table-bordered">
    <thead>
        <th>BIB</th>
        <th>Time Start</th>
        <th>Time End</th>
        <th>Time</th>
    </thead>
    <tbody></tbody>
</table>

但我不知道如何计算time end减去time start的结果，然后可以在列Time中显示附加表。怎么这样给？请任何人帮忙

Answer 1

var 
        startstring = "00:03:12.037300",
        endstring = "00:04:12.123000",
        startarray = (startstring.replace(".",":")).split(":"),
        endarray = (endstring.replace(".",":")).split(":"),
        starttime = new Date(2000,1,1,startarray[0],startarray[1],startarray[2],Math.floor(startarray[3]/1000)),
        endtime = new Date(2000,1,1,endarray[0],endarray[1],endarray[2],Math.floor(endarray[3]/1000)),
        time = new Date (endtime - starttime),
        timestring = time.getHours()-1+":"+time.getMinutes()+":"+time.getSeconds()+"."+time.getMilliseconds();
    alert(timestring);// Just for testing

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date

Answer 2

你需要从字符串中提取时间并将它们解析为数字并进行如下计算：

var str = "764#00:03:12.037300#00:04:12.123000";
var finalTime='The final time difference is = ';
var times = str.match(/(\d{2}:\d{2}:\d{2})/g);
var time1 = [].map.call(times[0].split(':'), function(t) {
  return parseInt(t);
});
var time2 = [].map.call(times[1].split(':'), function(t) {
  return parseInt(t);
});
var hms;
for (var i = 0; i < time1.length; i++) {
  if (i == 0) {
    hms = ' : hrs, ';
  }else if(i == 1){
    hms = ' : mins, ';
  }else{
    hms = ' : secs';
  }
  var tdiff = time2[i] - time1[i];
  finalTime += tdiff + hms;
}

document.querySelector('pre').innerText = finalTime;

<pre></pre>

或者正如您所提到的，您已添加了行，您可以通过以下方式简化此操作：

var finalTime = '',
  time1 = document.querySelector('#sampleTbl tr:nth-child(1) td:nth-child(2)').textContent,
  time2 = document.querySelector('#sampleTbl tr:nth-child(1) td:nth-child(3)').textContent,
  tarr1 = [].map.call(time1.split(':'), function(t) {
    return parseFloat(t);
  }),
  tarr2 = [].map.call(time2.split(':'), function(t) {
    return parseFloat(t);
  });
for (var i = 0; i < tarr1.length; i++) {
  var tdiff = (i >= tarr1.length - 1 ? parseFloat(tarr2[i] - tarr1[i]).toFixed(4) : parseFloat(tarr2[i] - tarr1[i])) + (i < tarr1.length - 1 ? ":" : "");
  finalTime += tdiff
}

document.querySelector('#sampleTbl tr:nth-child(1) td:nth-child(4)').textContent = finalTime;

<table id="sampleTbl" border='1'>
  <thead>
    <tr>
      <th>BIB</th>
      <th>Time Start</th>
      <th>Time End</th>
      <th>Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>764</td>
      <td>00:03:12.037300</td>
      <td>00:04:12.123000</td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 3

您可以使用Date类的javascript来获得时差。

初始化两个日期

var date1 = new Date(2000, 0, 1,  9, 0); // 9:00 AM
var date2 = new Date(2000, 0, 1, 17, 0); // 5:00 PM

// the following is to handle cases where the times are on the opposite side of
// midnight e.g. when you want to get the difference between 9:00 PM and 5:00 AM

if (date2 < date1) {
    date2.setDate(date2.getDate() + 1);
}

var diff = date2 - date1;

// 28800000 milliseconds (8 hours)

JQuery读取，解析，显示文本文件和计数结果

3 个答案: