Js loop?
<script>
let alarm = new Audio('alarm.mp3');
let timerStarted = false;
function startTimer() {
if (!timerStarted) {
let startTime = new Date().getTime();
let fiveMinutes = 1000 * 60 * 5;
let endTime = startTime + fiveMinutes;
setInterval(function() {
let timeLeft = endTime - new Date().getTime();
if (timeLeft > 0) {
let minutes = timeLeft / (1000 * 60);
minutes = Math.floor(minutes);
let seconds = (timeLeft / 1000) % 60;
seconds = Math.round(seconds);
seconds = ('0' + seconds).slice(-2);
let text = '0' + minutes + ' : ' + seconds;
timer.innerHTML = text;
} else {
alarm.play();
timer.innerHTML = '00 : 00';
}
}, 1000);
timerStarted = true;
}
}
</script>
Ich möchte diese Aktion gerne loopen (dass der timer immer neu startet nach dem Alarm) wie geht das?
2 Antworten
Wenn die Zeit abgelaufen ist, brauchst du die Zeitspanne einfach nur wieder auf die Endzeit addieren.
<p id="timer"></p>
<script>
function startTimer() {
const timer = document.getElementById("timer");
const alarm = new Audio('alarm.mp3');
let startTime = new Date().getTime();
const timeSpan = 1000 * 60 * 5;
let endTime = startTime + timeSpan;
setInterval(function() {
let timeLeft = endTime - new Date().getTime();
if (timeLeft > 0) {
let minutes = timeLeft / (1000 * 60);
minutes = Math.floor(minutes);
let seconds = (timeLeft / 1000) % 60;
seconds = Math.round(seconds);
seconds = ('0' + seconds).slice(-2);
timer.innerText = `0 ${minutes}:${seconds}`;
}
else {
alarm.play();
timer.innerText = '00 : 00';
endTime += timeSpan;
}
}, 1000);
}
startTimer();
</script>
Dieses Beispiel ist erst einmal nur auf die Zeitanzeige fokussiert.
Nun könnte es hier das Problem geben, dass die Audiowiedergabe etwas länger dauert. Statt also die Endzeit im else-Block neu zu setzen, könntest du dies im Event Callback tun, welcher ausgeführt wird, wenn die Audiowiedergabe beendet wurde.
// in startTimer:
// ...
alarm.addEventListener('ended', evt => endTime += timeSpan);
// set interval ...
Wozu eine Änderung an der Stelle? Du hast in der Funktion doch nur eine Variable mit diesem Namen und das Audio-Objekt ändert sich doch nicht?
Das setzt voraus, dass die Endzeit entweder nicht mehr oder stets nur um zwei Sekunden erhöht wird. Wenn es ein endgültiges Ende des Timers geben soll, dann brich ihn explizit ab.
Zunächst brauchst du eine Referenz, die auf ihn zeigt:
const timer = setInterval(function() { /* ... */ }, 1000);
Dann kannst du ihn mit dieser beenden.
clearInterval(timer);
Poste besser noch einmal deinen Code, damit ich deinen aktuellen Stand kenne. Beschreibe außerdem noch einmal, was du gerade erreichen möchtest, denn einen immer neu startenden Timer scheinst du nicht mehr haben zu wollen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="manifest" href="manifest.json">
<style>
.background-dark {
background-color: #262626;
}
.center {
display: flex;
justify-content: center;
}
.margin-top {
margin-top: 60px;
}
.timer {
font-size: 60px;
color: #7ac134;
font-family: 'Roboto', sans-serif;
}
</style>
<script>
function startTimer() {
const timer = document.getElementById("timer");
const alarm = new Audio('mixx.m4a');
let startTime = new Date().getTime();
const timeSpan = 1000 * 60 * 1;
let endTime = startTime + timeSpan;
setInterval(function() {
let timeLeft = endTime - new Date().getTime();
if (timeLeft > 0) {
let minutes = timeLeft / (1000 * 60);
minutes = Math.floor(minutes);
let seconds = (timeLeft / 1000) % 60;
seconds = Math.round(seconds);
seconds = ('0' + seconds).slice(-2);
timer.innerText = `0${minutes}:${seconds}`;
}
else {
alarm.play();
timer.innerText = '00:00';
endTime += timeSpan;
}
}, 1000);
}
startTimer();
</script>
</head>
<body class="background-dark">
<div>
<img src="images/striche2.png" height="60px" width="60px">
</div>
<div class="center margin-top">
<img src="images/pixil-frame-0.png" height="200px" width="200px">
</div>
<div class="center margin-top timer" id="timer">05:00</div>
<div class="center margin-top timer">
<img onclick="startTimer()" src="images/btn2.png" height="300px" width="300px">
</div>
</body>
</html>
Ich möchte halt dass alle 5 min dieser hinterlegte ton abgespielt wird und man auf dem Timer nachverfolgen kann wie lang es noch dauert bis der nächste Ton kommt (habe die zeit auf 1min zum ausprobieren gesetzt)
So funktioniert es auch wie erwartet.
https://www.w3schools.com/code/tryit.asp?filename=GUATERN0HS9V
Ich habe noch den Aufruf:
startTimer();
entfernt, da du den Timer ja erst bei Bildklick starten möchtest. Außerdem habe ich deinen img-Tag korrigiert (das fehlende alt-Attribut ergänzt und die Einheiten für Breite und Höhe entfernt - die wären nur in CSS erlaubt).
Hier noch die (auch schon oben beschriebene) feinfühligere Variante:
https://www.w3schools.com/code/tryit.asp?filename=GUATJCT6EJ1Q
Der Timer startet erst wieder neu, wenn das Audio komplett abgespielt wurde.
Zu guter Letzt ein Beispiel, wie du den Timer via Buttonklick wieder beenden kannst:
https://www.w3schools.com/code/tryit.asp?filename=GUATPZ4STX42
Ich habe dort noch die anderen beiden img-Tags korrigiert.
Wenn du deine variable "alarm" hast:
<script>
alarm.loop = true
//zum stoppen
alarm.pause()
//zum starten
alarm.currentTime = 0;
alarm.play()
</script>
Vielen Dank. ich habe das const beim Alarm noch geändert aber an sonsten ging alles spitze