<!DOCTYPE html>
<html>
<head>
<title>Stoppuhr</title>
</head>
<body>
<h1>Stoppuhr</h1>
<div id="timer"></div>
<button id="startBtn" onclick="startTimer()">Start</button>
<button id="stopBtn" onclick="stopTimer()">Stop</button>
<button id="resetBtn" onclick="resetTimer()">Reset</button>
<script>
let seconds = 0;
let timer;
function startTimer() {
timer = setInterval(() => {
seconds++;
document.getElementById("timer").innerHTML = seconds;
}, 1000);
}
function stopTimer() {
clearInterval(timer);
}
function resetTimer() {
stopTimer();
seconds = 0;
document.getElementById("timer").innerHTML = seconds;
}
</script>
</body>
</html>
Lap
<!DOCTYPE html>
<html>
<head>
<title>Stoppuhr</title>
</head>
<body>
<h1>Stoppuhr</h1>
<div id="timer"></div>
<button id="startBtn" onclick="startTimer()">Start</button>
<button id="stopBtn" onclick="stopTimer()">Stop</button>
<button id="resetBtn" onclick="resetTimer()">Reset</button>
<button id="lapBtn" onclick="lapTimer()">Zwischenzeit</button>
<div id="laps"></div>
<script>
let seconds = 0;
let timer;
let laps = [];
function startTimer() {
timer = setInterval(() => {
seconds++;
document.getElementById("timer").innerHTML = seconds;
}, 1000);
}
function stopTimer() {
clearInterval(timer);
}
function resetTimer() {
stopTimer();
seconds = 0;
laps = [];
document.getElementById("timer").innerHTML = seconds;
document.getElementById("laps").innerHTML = "";
}
function lapTimer() {
laps.push(seconds);
let lapList = document.getElementById("laps");
let newLap = document.createElement("li");
newLap.innerHTML = "Zwischenzeit " + laps.length + ": " + seconds + " Sekunden";
lapList.appendChild(newLap);
}
</script>
</body>
</html>