如何在if else语句中使用输入类型=文本的值

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>