javascript - 如何在 if else 语句中使用输入 type=text 中的值

Question

我制作了一个界面，供用户记录他们的进出时间并计算次数。工作时间。但是，我并不完全理解我使用的代码，因此希望找到一个更容易理解的选项。我需要将文本中的进出时间转换为另一个代码来检查员工是否工作了一整天(工作时间>8小时)还是半天等。

我用它来计算工作时间(用户输入时间为 hh:mm)

function diff(a, b) {
  function toTime(a) {
    return Date.parse('1970-01-01 ' + a.substr(0, 5)) / 1000 +
      (a.includes('PM') && (12 * 60));
  }
  var d = toTime(b) - toTime(a);
  return d >= 0 ? new Date(0, 0, 0, 0, 0, d).toTimeString().substr(0, 5) : '';
}

function myFunction() {

  var workhours;

  workhours = diff($('#in-time').val(), $('#out-time').val());
  $('#value').val(workhours);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <th>Employee Name</th>
    <th>In Time</th>
    <th>Out Time</th>
    <th>Hours Worked</th>
  </tr>

  <tr>
    <td>Test</td>
    <td><input type="text" id="in-time"></td>
    <td><input type="text" id="out-time" onkeyup="myFunction()"></td>
    <td><input type="text" id="value"></td>
  </tr>

</table>

编辑:如果有人有一种更简单的方法来根据这两个输入来计算工作时间，那么如果有人能解释一下那就太好了，这样我就可以在未来的项目中学习它

Answer 1

如果其他人尝试做类似的事情，我只是编写了这段有效的代码。我将在一段时间后更新它，并添加评论来解释我如何让它工作。

function myFunction() {
  
var inTime = document.getElementById("in-time").value; // assume its 08:30
var outTime = document.getElementById("out-time").value;// assume its 17:30

var hours = inTime.split(':',1); // array = [08]
var hours2 = outTime.split(':',1); // array = [17]

var minutesArray = inTime.split(':',2); // array = [08,30]
var minutesArray2 = outTime.split(':', 2); // array = [17,30]

var minutes = minutesArray[1]; // select '30' from the array [08,30]
var minutes2 = minutesArray2[1]; // select '30' from the array [17,30]

var hoursToMinutes = hours * 60;
var hoursToMinutes2 = hours2 * 60;

var time = hoursToMinutes + parseInt(minutes);
var time2 = hoursToMinutes2 + parseInt(minutes2);

var workhours =(time2 - time)/60;

document.getElementById("workhours").innerHTML = workhours;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <th>Employee Name</th>
    <th>In Time</th>
    <th>Out Time</th>
    <th>Hours Worked</th>
  </tr>

  <tr>
    <td>Test</td>
    <td><input type="text" id="in-time"></td>
    <td><input type="text" id="out-time" onkeyup="myFunction()"></td>
    <td><span id="workhours"></span></td>
  </tr>

</table>