Hallo Ihr da draußen,
Ich hätte gerne für meine Meditationsgruppe einen Meditation - Timer und dachte ,mit HTLM ist das ja kein Problem.
Ich brauch nur eine laufende Uhrzeit und einen Timer der nach oben zählt.
Und ganz einfach ist dieser Code entstanden. Es fehlen zur die Nullen, wenn die Zahl noch keinen Zehner hat, aber bis dahin volle Funktion.
Aber, wenn die zweite Medi oder eine weitere startet bekommen ich den count_up - Timer nicht Resetet.
Kann da jemand helfen?
Vielen Dank im Voraus.
Code
<html lang="de">
<head>
<title>Meditations Timer 07.20</title>
</head>
<body>
<p id="uhr"></p>
<p id="count_up"></p>
<button id="nullen">Counter Zurücksetzten</button>
<script>
var counter;
document.getElementById('nullen').addEventListener('click',function(){
countDownDate = new Date();
localStorage.setItem('startDate', countDownDate);
/* Falls der Timer bei 0 Stehen bleiben soll
setTimeout(function(){
clearInterval(counter);
},999);
*/
})
var countDownDate = localStorage.getItem('startDate');
if (countDownDate) {
countDownDate = new Date(countDownDate);
} else {
countDownDate = new Date();
localStorage.setItem('startDate', countDownDate);
}
var countup=document.getElementById("count_up");
var clock=document.getElementById('uhr');
counter= setInterval(function() {
var now = new Date().getTime();
var Time = new Date().getTime();
var distance = now - countDownDate.getTime();
var mi = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var se = Math.floor((distance % (1000 * 60)) / 1000);
countup.innerHTML = (mi<10 ? '0'+mi : mi) +":"+ (se<10 ? '0'+se : se);
var jetzt = new Date();
h = jetzt.getHours();
m = jetzt.getMinutes();
s = jetzt.getSeconds();
clock.innerHTML = (h<10 ? '0'+h : h) + ' : ' + (m<10 ? '0'+m : m) + ' : ' + (s<10 ? '0'+s : s);
}, 1000);
</script>
</body>
</html>