Pausenzeiten aus Arbeitszeit mit Javascript berechnen

lima-city: Webhosting, Domains und Cloud
0 Pluspunkte 0 Minuspunkte

Ich habe eine kleine HTML Website wo ich Arbeitszeiten (Start und Ende) eingeben kann die dann alle zusammengerechnet werden.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Arbeitszeiterfassung</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    input { margin: 5px; }
    table { border-collapse: collapse; margin-top: 20px; width: 100%; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
    .total { font-weight: bold; margin-top: 20px; }
  </style>
</head>
<body>
  <h1>Arbeitszeiterfassung</h1>

  <label>Startzeit:
    <input type="time" id="startzeit">
  </label>
  <label>Endzeit:
    <input type="time" id="endzeit">
  </label>
  <button onclick="zeitHinzufügen()">Hinzufügen</button>

  <table id="zeittabelle">
    <thead>
      <tr>
        <th>Startzeit</th>
        <th>Endzeit</th>
        <th>Dauer</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <div class="total" id="gesamtzeit">Gesamtzeit: 0 Stunden 0 Minuten</div>

  <script>
    let zeitblöcke = [];

    function parseTimeToDate(timeStr) {
      return new Date("1970-01-01T" + timeStr + ":00");
    }

    function berechneDauer(start, ende) {
      return (ende - start) / (1000 * 60); // in Minuten
    }

    function zeitHinzufügen() {
      const startStr = document.getElementById('startzeit').value;
      const endeStr = document.getElementById('endzeit').value;

      if (!startStr || !endeStr) return alert("Bitte Start- und Endzeit eingeben.");

      const start = parseTimeToDate(startStr);
      const ende = parseTimeToDate(endeStr);

      if (ende <= start) return alert("Endzeit muss nach der Startzeit liegen.");

      // Block speichern
      zeitblöcke.push({ start, ende });

      // Neue Zeile hinzufügen
      const diffMin = berechneDauer(start, ende);
      const stunden = Math.floor(diffMin / 60);
      const minuten = Math.floor(diffMin % 60);

      const tabelle = document.getElementById("zeittabelle").getElementsByTagName("tbody")[0];
      const zeile = tabelle.insertRow();
      zeile.insertCell(0).textContent = startStr;
      zeile.insertCell(1).textContent = endeStr;
      zeile.insertCell(2).textContent = `${stunden}h ${minuten}min`;

      zeitenNeuBerechnen();

      // Eingabe leeren
      document.getElementById('startzeit').value = '';
      document.getElementById('endzeit').value = '';
    }

    function zeitenNeuBerechnen() {
      if (zeitblöcke.length === 0) {
        document.getElementById("gesamtzeit").textContent = `Gesamtzeit: 0 Stunden 0 Minuten`;
        return;
      }

      // Alle Zeitblöcke nach Start sortieren
      zeitblöcke.sort((a, b) => a.start - b.start);

      let gesamtMinuten = 0;
      let ausreichendPause = false;

      for (let i = 0; i < zeitblöcke.length; i++) {
        const block = zeitblöcke[i];
        gesamtMinuten += berechneDauer(block.start, block.ende);

        // Prüfe Pause zur vorherigen Zeit
        if (i > 0) {
          const pause = berechneDauer(zeitblöcke[i - 1].ende, block.start);
          if (pause >= 30) {
            ausreichendPause = true;
          }
        }
      }

      // Wenn mehr als 6 Stunden und keine ausreichende Pause → 30 Min abziehen
      if (gesamtMinuten > 360 && !ausreichendPause) {
        gesamtMinuten -= 30;
      }

      const gesamtStunden = Math.floor(gesamtMinuten / 60);
      const gesamtRestMinuten = Math.floor(gesamtMinuten % 60);
      document.getElementById("gesamtzeit").textContent = `Gesamtzeit: ${gesamtStunden} Stunden ${gesamtRestMinuten} Minuten` +
        (gesamtMinuten < 360 && !ausreichendPause ? '' : (gesamtMinuten > 360 && !ausreichendPause ? ' (inkl. -30min Pause)' : ''));
    }
  </script>
</body>
</html>

W§enn ich länger als 6 Stunden am Stück arbeite wird automatisch eine Pause von 30 Minuten eingetragen, auch wenn ich z.B nur 10 Minuten weg war. Wie kann ich die 30 Minuten Pause hier automatisch mit einbeziehen? Wenn ich also 2 Einträge mache wo dazweischen 15 Minuten sind, soll die Zeit automatisch so berechnet werden dass die 30 Minuten mit einbezogen werden. Wie kann ich das umsetzen?

von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

Hier ist ein Beispiel, dass ab einer Arbeitszeit von > 6Stunden automatisch 30 Minuten Pause abzieht. Wenn du bereits 15 Minuten Pause gemacht hast werden die einkalkuliert.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Arbeitszeiterfassung</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; max-width: 600px; margin: auto; }
    input { margin: 5px; }
    table { border-collapse: collapse; margin-top: 20px; width: 100%; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
    .total { font-weight: bold; margin-top: 20px; font-size: 1.1em; }
  </style>
</head>
<body>
  <h1>Arbeitszeiterfassung</h1>

  <label>Startzeit:
    <input type="time" id="startzeit">
  </label>
  <label>Endzeit:
    <input type="time" id="endzeit">
  </label>
  <button onclick="zeitHinzufügen()">Hinzufügen</button>

  <table id="zeittabelle">
    <thead>
      <tr>
        <th>Startzeit</th>
        <th>Endzeit</th>
        <th>Dauer</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <div class="total" id="gesamtzeit">Gesamtzeit: 0 Stunden 0 Minuten</div>

  <script>
    let zeitblöcke = [];

    function parseTimeToDate(timeStr) {
      return new Date("1970-01-01T" + timeStr + ":00");
    }

    function berechneDauer(start, ende) {
      return (ende - start) / (1000 * 60); // Minuten
    }

    function zeitHinzufügen() {
      const startStr = document.getElementById('startzeit').value;
      const endeStr = document.getElementById('endzeit').value;

      if (!startStr || !endeStr) return alert("Bitte Start- und Endzeit eingeben.");

      const start = parseTimeToDate(startStr);
      const ende = parseTimeToDate(endeStr);

      if (ende <= start) return alert("Endzeit muss nach der Startzeit liegen.");

      zeitblöcke.push({ start, ende });

      const diffMin = berechneDauer(start, ende);
      const stunden = Math.floor(diffMin / 60);
      const minuten = Math.floor(diffMin % 60);

      const tabelle = document.getElementById("zeittabelle").getElementsByTagName("tbody")[0];
      const zeile = tabelle.insertRow();
      zeile.insertCell(0).textContent = startStr;
      zeile.insertCell(1).textContent = endeStr;
      zeile.insertCell(2).textContent = `${stunden}h ${minuten}min`;

      document.getElementById('startzeit').value = '';
      document.getElementById('endzeit').value = '';

      zeitenNeuBerechnen();
    }

    function zeitenNeuBerechnen() {
      if (zeitblöcke.length === 0) {
        document.getElementById("gesamtzeit").textContent = `Gesamtzeit: 0 Stunden 0 Minuten`;
        return;
      }

      // Nach Start sortieren
      zeitblöcke.sort((a, b) => a.start - b.start);

      let arbeitsMinuten = 0;
      let pausenGesamt = 0;

      for (let i = 0; i < zeitblöcke.length; i++) {
        const block = zeitblöcke[i];
        arbeitsMinuten += berechneDauer(block.start, block.ende);

        if (i > 0) {
          const pauseZwischen = berechneDauer(zeitblöcke[i - 1].ende, block.start);
          pausenGesamt += pauseZwischen; // Alle Pausen werden gezählt
        }
      }

      let nettoMinuten = arbeitsMinuten;
      let abgezogen = 0;

      if (arbeitsMinuten > 360 && pausenGesamt < 30) {
        abgezogen = 30 - pausenGesamt;
        nettoMinuten -= abgezogen;
      }

      const nettoStunden = Math.floor(nettoMinuten / 60);
      const nettoRestMinuten = Math.round(nettoMinuten % 60);

      const zusatz = abgezogen > 0 ? ` (autom. -${Math.round(abgezogen)}min Pause)` : '';

      document.getElementById("gesamtzeit").textContent = `Gesamtzeit: ${nettoStunden} Stunden ${nettoRestMinuten} Minuten${zusatz}`;
    }
  </script>
</body>
</html>
von (762 Punkte)  

Ähnliche Fragen