Ich habe mir eine Fitness-App aufgebaut, in der man zwischen Cardio und Kraftsport auswählen kann und man seine Ergebnisse speichern kann. Beim Cardio-Bereich wollte ich zusätzlich noch eine Stoppuhr einfügen. Die funktioniert auch so weit, aber das Problem ist, dass bei mir der Text zwar bei Stopp pausiert und beim Reset auch resettet wird, die Zeit läuft im Hintergrund allerdings immer weiter. D. h. wenn ich den Start Button anschließend wieder klicke, dann läuft die Zeit einfach immer weiter.
Ich sitze seit dem Wochenende dran das Problem zu lösen und habe mir auch diverse Tutorials dazu durchgelesen, habe bisher aber keine Lösung gefunden und weiß auch nicht mehr was ich sonst machen soll. Deshalb hoffe ich, dass mir hier jemand dabei weiterhelfen kann.
Unten ist einmal der Code für die Stoppuhr, die hatte ich mir nämlich in einem eigenen Projekt nochmal aufgebaut und versucht zu lösen, ohne irgendetwas im Hauptprogramm kaputtzumachen. Sorry auch für die Unordnung, ich hab das Step by Step aufgebaut und auch eigentlich gar keine Ahnung von sowas.
VERSION von Sempervivum
Code
<span id="out"></span>
<button id="start-stop-btn">
Start/Stop
</button>
<button id="reset-btn">
Reset
</button>
<script>
var sum = 0, running = false, started,
vOut = document.getElementById('out');
document.getElementById('start-stop-btn').addEventListener('click', function() {
if (!running) {
started = Date.now();
running = true;
} else {
sum += Date.now() - started;
running = false;
}
});
setInterval(function() {
if (running) {
tim = Date.now() - started + sum;
vOut.textContent = (tim / 1000).toFixed(1);
}
}, 100);
document.getElementById('reset-btn').addEventListener('click', function() {
if (!running) {
sum = 0;
vOut.textContent = '';
}
});
</script>