如何使用jQuery计算文本框时间差值并判断员工工时类型？

Hey there! Let's sort out your code—you're on the right track, but a few syntax and logic issues are keeping it from working properly. Here's what's wrong and how to fix it:

Key Issues in Your Original Code #

• Syntax Mistakes:
  • You used => instead of the correct greater-than-or-equal operator >= in your first condition.
  • The else if line is missing parentheses around the condition—it should be else if (workHours < 8).
• Inaccurate Time Calculation:
  • Using parseInt() on time inputs (like "9:30") only captures the hour part and discards minutes, leading to wrong duration totals. We need to convert time strings into total minutes for precise calculations.
• Limited Event Trigger:
  • Right now, calculations only run when typing in the "Out Time" field. Let's add the same trigger to "In Time" so updates happen whenever either time changes.

Fixed Full Code #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function calculateWorkDuration() { 
  // Helper function to convert "hh:mm" time string to total minutes
  function timeToMinutes(timeStr) {
    if (!timeStr.includes(':')) return 0; // Handle invalid format
    const [hours, minutes] = timeStr.split(':').map(Number);
    return hours * 60 + minutes;
  }

  const inTimeStr = $("#in-time").val().trim();
  const outTimeStr = $("#out-time").val().trim();
  
  // Validate inputs first
  if (!inTimeStr || !outTimeStr || !inTimeStr.includes(':') || !outTimeStr.includes(':')) {
    $("#value").text('Please enter time in hh:mm format');
    return;
  }

  const inMinutes = timeToMinutes(inTimeStr);
  const outMinutes = timeToMinutes(outTimeStr);
  
  // Make sure out time is after in time
  if (outMinutes <= inMinutes) {
    $("#value").text('Out time must be after in time');
    return;
  }

  const workHours = (outMinutes - inMinutes) / 60; // Convert back to hours

  if (workHours >= 8) { 
    $("#value").text('Full Day');
  } else if (workHours > 0) { // Add check to avoid negative/zero hours
    $("#value").text('Half Day');
  } else { 
    $("#value").text('Error');
  }
}
</script>

<table> 
  <tr> 
    <th class="table-custom2">Employee Name</th> 
    <th class="table-custom2">In Time</th> 
    <th class="table-custom2">Out Time</th> 
    <th class="table-custom2">Shift Type</th> 
  </tr> 
  <tr> 
    <td class="table-custom2">Test User</td> 
    <td class="table-custom3"><input type="text" id="in-time" class="input-xsmall" onkeyup="calculateWorkDuration()" placeholder="hh:mm"></td> 
    <td class="table-custom3"><input type="text" id="out-time" class="input-xsmall" onkeyup="calculateWorkDuration()" placeholder="hh:mm"></td> 
    <td class="table-custom3"><span id="value"></span></td> 
  </tr> 
</table>

What Changed: #

1. Renamed the function to calculateWorkDuration() for clarity.
2. Added a timeToMinutes() helper to convert time strings into total minutes, so we can calculate exact hours (including fractions for minutes).
3. Added input validation to ensure users enter time in hh:mm format, and that out time is after in time.
4. Fixed all syntax errors in the conditionals.
5. Added onkeyup to both input fields so calculations update whenever either time is modified.
6. Updated the table header from "Unnamed" to "Shift Type" for better readability.

内容的提问来源于stack exchange，提问作者Hisham Bawa