Frage zur Stoppuhr mit Javascript
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.
Der hier verwendete Code
<style>
#clear,#save{
display:none;
}
#buttons{
width:100%;
display:flex;
}
td{
display:inline-block;
border:1px solid black;
width:100px;
}
</style>
<div id="buttons">
<button id="toggle">Timer starten</button>
<button id="clear">Timer reseten</button> <button id="save">Zeit speichern ?</button></div>
<div id="timer">0:00:00.00</div><br><br>
<table id="runde">
<tr><td>Runde</td><td>Zeit</td><td>Uhrzeit</td></tr>
</table>
<script>
(function timer() {
'use strict';
//declare
var output = document.getElementById('timer');
var toggle = document.getElementById('toggle');
var clear = document.getElementById('clear');
var save = document.getElementById('save');
var running = false;
var paused = false;
var timer,then,delay,delayThen;
var start = function() {
delay = 0;
running = true;
then = Date.now();
timer = setInterval(run,51);
toggle.innerHTML = 'Timer pausieren';
};
var parseTime = function(elapsed) {
var d = [3600000,60000,1000,10];
var time = [];
var i = 0;
while (i < d.length) {
var t = Math.floor(elapsed/d[i]);
elapsed -= t*d[i];
t = (i > 0 && t < 10) ? '0' + t : t;
time.push(t);
i++;
}
return time;
};
var run = function() {
var time = parseTime(Date.now()-then-delay);
output.innerHTML = time[0] + ':' + time[1] + ':' + time[2] + '.' + time[3];
};
var stop = function() {
paused = true;
delayThen = Date.now();
toggle.innerHTML = 'Timer weiter laufen lassen';
document.getElementById('clear').style.display="block";
document.getElementById('save').style.display="block";
clearInterval(timer);
run();
};
var resume = function() {
paused = false;
delay += Date.now()-delayThen;
timer = setInterval(run,51);
toggle.innerHTML = 'Timer pausieren';
document.getElementById('clear').style.display="none";
document.getElementById('save').style.display="none";
//clear.dataset.state = '';
};
// clear
var reset = function() {
running = false;
paused = false;
toggle.innerHTML = 'Timer starten';
output.innerHTML = '0:00:00.00';
//clear.dataset.state = '';
document.getElementById('clear').style.display="none";
document.getElementById('save').style.display="none";
};
var b=0;
var runde = function() {
b++;
var rund=output.innerHTML;
let elapsedTime = new Date ();
let seconds = elapsedTime.getSeconds();
let minutes = elapsedTime.getMinutes();
let hours = elapsedTime.getHours() -1;
let zeit = hours+":"+minutes+":"+seconds;
document.getElementById('runde').innerHTML +='<tr><td>' +b+'.</td><td> '+rund+'</td><td>'+zeit+'</td></tr>';
};
var router = function() {
if (!running) start();
else if (paused) resume();
else stop();
};
toggle.addEventListener('click',router);
clear.addEventListener('click',reset);
save.addEventListener('click',runde);
})();
</script>