工时计算脚本修改需求：支持周末计算及替换星期显示

Here's the complete implementation that addresses both of your requirements:

Modified HTML #

First, we've replaced the numeric row labels with full weekday names and added Saturday/Sunday rows to the table:

<table>
  <thead>
    <tr>
      <th>Day</th>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Break</th>
      <th>Total Hours</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td><input type="time" class="start" id="start1"></td>
      <td><input type="time" class="end" id="end1"></td>
      <td><input type="number" class="break" id="break1" value="0" min="0"></td>
      <td><input type="number" class="total" id="total1" readonly></td>
    </tr>
    <tr>
      <td>Tuesday</td>
      <td><input type="time" class="start" id="start2"></td>
      <td><input type="time" class="end" id="end2"></td>
      <td><input type="number" class="break" id="break2" value="0" min="0"></td>
      <td><input type="number" class="total" id="total2" readonly></td>
    </tr>
    <tr>
      <td>Wednesday</td>
      <td><input type="time" class="start" id="start3"></td>
      <td><input type="time" class="end" id="end3"></td>
      <td><input type="number" class="break" id="break3" value="0" min="0"></td>
      <td><input type="number" class="total" id="total3" readonly></td>
    </tr>
    <tr>
      <td>Thursday</td>
      <td><input type="time" class="start" id="start4"></td>
      <td><input type="time" class="end" id="end4"></td>
      <td><input type="number" class="break" id="break4" value="0" min="0"></td>
      <td><input type="number" class="total" id="total4" readonly></td>
    </tr>
    <tr>
      <td>Friday</td>
      <td><input type="time" class="start" id="start5"></td>
      <td><input type="time" class="end" id="end5"></td>
      <td><input type="number" class="break" id="break5" value="0" min="0"></td>
      <td><input type="number" class="total" id="total5" readonly></td>
    </tr>
    <tr>
      <td>Saturday</td>
      <td><input type="time" class="start" id="start6"></td>
      <td><input type="time" class="end" id="end6"></td>
      <td><input type="number" class="break" id="break6" value="0" min="0"></td>
      <td><input type="number" class="total" id="total6" readonly></td>
    </tr>
    <tr>
      <td>Sunday</td>
      <td><input type="time" class="start" id="start7"></td>
      <td><input type="time" class="end" id="end7"></td>
      <td><input type="number" class="break" id="break7" value="0" min="0"></td>
      <td><input type="number" class="total" id="total7" readonly></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Weekly Total</td>
      <td><input type="number" id="weeklyTotal" readonly></td>
    </tr>
  </tfoot>
</table>

Modified JavaScript #

Next, we've updated the calculation logic to include all 7 days (including weekends) and ensure event listeners work for the new rows:

// Convert HH:mm time string to total minutes since midnight
function convertTimeToMinutes(timeStr) {
  const [hours, minutes] = timeStr.split(':').map(Number);
  return hours * 60 + minutes;
}

// Calculate total hours for a single day
function calculateDailyHours(dayIndex) {
  const startTime = document.getElementById(`start${dayIndex}`).value;
  const endTime = document.getElementById(`end${dayIndex}`).value;
  const breakHours = parseFloat(document.getElementById(`break${dayIndex}`).value) || 0;

  if (!startTime || !endTime) {
    document.getElementById(`total${dayIndex}`).value = '';
    return 0;
  }

  const startMinutes = convertTimeToMinutes(startTime);
  const endMinutes = convertTimeToMinutes(endTime);

  // Handle overnight shifts (end time earlier than start time)
  let totalMinutes = endMinutes >= startMinutes 
    ? endMinutes - startMinutes 
    : (1440 - startMinutes) + endMinutes;

  // Subtract break time (converted to minutes)
  totalMinutes -= breakHours * 60;

  const totalHours = totalMinutes / 60;
  document.getElementById(`total${dayIndex}`).value = totalHours.toFixed(2);

  return totalHours;
}

// Calculate total hours for the entire week
function calculateWeeklyTotal() {
  let weeklyTotal = 0;
  // Loop through all 7 days (1-7) instead of just weekdays
  for (let i = 1; i <= 7; i++) {
    const dailyTotal = parseFloat(document.getElementById(`total${i}`).value) || 0;
    weeklyTotal += dailyTotal;
  }
  document.getElementById('weeklyTotal').value = weeklyTotal.toFixed(2);
}

// Attach event listeners to all input fields
document.querySelectorAll('.start, .end, .break').forEach(input => {
  input.addEventListener('input', () => {
    // Extract day index from input ID (e.g., "start6" -> 6)
    const dayIndex = input.id.match(/\d+/)[0];
    calculateDailyHours(dayIndex);
    calculateWeeklyTotal();
  });
});

Key Changes Explained: #

1. Weekday Name Replacement: We swapped the numeric row labels (1-7) with Monday through Sunday in the table's body rows to make the timesheet more intuitive.
2. Weekend Calculation Support:
   • Added full rows for Saturday and Sunday in the HTML, matching the structure of the weekday rows.
   • Updated the calculateWeeklyTotal function to loop from 1 to 7 instead of stopping at 5, ensuring weekend hours are included in the weekly total.
   • The event listeners automatically apply to the new weekend input fields since we're using class selectors (.start, .end, .break) instead of targeting individual IDs.

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