50 lines
1.5 KiB
PHP
50 lines
1.5 KiB
PHP
<h1>Überstunden Rechner</h1>
|
|
<div class="overtime-container">
|
|
<label for="startTime">Arbeitsstartzeit:</label>
|
|
<input type="time" id="startTime" step="60">
|
|
<button id="startBtn">Start</button>
|
|
|
|
<div class="overtime-result">
|
|
<p>Überstunden / Restzeit:</p>
|
|
<div id="result">0:00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('startBtn').addEventListener('click', startCalculating);
|
|
|
|
let timer;
|
|
|
|
function startCalculating() {
|
|
clearInterval(timer);
|
|
|
|
const startTimeInput = document.getElementById('startTime').value;
|
|
if (!startTimeInput) {
|
|
alert("Bitte eine Startzeit eingeben!");
|
|
return;
|
|
}
|
|
|
|
const now = new Date();
|
|
const [hours, minutes] = startTimeInput.split(':').map(Number);
|
|
|
|
let startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, 0);
|
|
const targetWorkMs = 8.5 * 60 * 60 * 1000; // 8,5 Stunden
|
|
|
|
const resultEl = document.getElementById('result');
|
|
|
|
timer = setInterval(() => {
|
|
const currentTime = new Date();
|
|
let workedMs = currentTime - startDate;
|
|
let diffMs = workedMs - targetWorkMs;
|
|
|
|
let negative = diffMs < 0;
|
|
let absMs = Math.abs(diffMs);
|
|
|
|
const hoursPart = Math.floor(absMs / (1000 * 60 * 60));
|
|
const minutesPart = Math.floor((absMs % (1000 * 60 * 60)) / (1000 * 60));
|
|
|
|
resultEl.innerText = `${negative ? '-' : '+'}${hoursPart}:${minutesPart < 10 ? '0' : ''}${minutesPart}`;
|
|
resultEl.parentElement.classList.toggle('negative', negative);
|
|
}, 1000);
|
|
}
|
|
</script> |