14.10.2023, 15:31
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Countdown</title>
<style>
#countdown {
font-size: 24px;
margin-top: 10px;
}
</style>
</head>
<body>
<button id="myButton">Halte mich 5 Sekunden lang gedrückt</button>
<div id="countdown"></div>
<script>
// Globale Variable für den Countdown-Intervall
let countdownInterval;
// Referenzen zu DOM-Elementen abrufen
const button = document.getElementById('myButton');
const countdownDiv = document.getElementById('countdown');
// Eventlistener für das Drücken des Buttons hinzufügen
button.addEventListener('mousedown', startCountdown);
button.addEventListener('mouseup', stopCountdown);
function startCountdown() {
// Setze den Countdown auf 5
let countdown = 5;
// Aktualisiere das Countdown-Div
updateCountdown();
// Starte das Intervall für den Countdown
countdownInterval = setInterval(() => {
countdown--;
// Wenn der Countdown 0 erreicht hat, zeige die Nachricht an
if (countdown === 0) {
showMessage();
stopCountdown();
} else {
updateCountdown();
}
}, 1000);
}
function stopCountdown() {
// Beende das Intervall
clearInterval(countdownInterval);
// Setze das Countdown-Div zurück
countdownDiv.textContent = '';
}
function updateCountdown() {
countdownDiv.textContent = `Countdown: ${countdown}s`;
}
function showMessage() {
alert('Nachricht nach 5 Sekunden!');
}
</script>
</body>
</html>
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" 