Javaskript Timer läuft im Minusbereich ab.

A

Armin77

Grünschnabel
Guten Abend ihr Lieben,
da ich totaler Anfänger in Sachen Javascript bin, bräuchte ich bitte Starthilfe bei dem Countdown timer, den ich gebastelt habe.
Das Problem ist, dass er Prima runterläuft, jedoch bei 00:00:00 nicht aufhört sondern in den Minusbereich geb :((
Kann mir da jemand helfen?
Der aktuelle Code :

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Contactform</title>
<!-- <link rel="stylesheet" href="css/style.css">-->

</head>
<body>

<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext"></div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext"></div>
</div>

<p class="noch">Noch</p>
<div>
<span class="minutes"></span>
<div class="smalltext"></div>
</div>
<p class="doppelpunkt">:</p>
<div>
<span class="seconds"></span>
<div class="smalltext"></div>
</div>
<p class="doppelpunkt">:</p>
<div>
<span class="mseconds"></span>
<div class="smalltext"></div>
</div>
<p class="doppelpunkt">!</p>
</div>

<script>

function getTimeRemaining(endtime) {
//var t = Date.parse(endtime) - Date.parse(new Date());
var t = Date.parse(endtime) - Date.now();
//var mseconds = Math.floor((t % 1000 / 10));

var seconds = Math.floor((t / 1000) % 60);
var mseconds = t;
var minutes = Math.floor((t / 1000 / 60) % 60);

return {
'total': t,
// 'days': days,
// 'hours': hours,
'minutes': minutes,
'seconds': seconds,
'mseconds': mseconds,
};
}

function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
var msecondsSpan = clock.querySelector('.mseconds');

function updateClock() {
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
msecondsSpan.innerHTML = ('0' + t.mseconds).slice(-2);
//console.log(seconds)

if (t.total <= 0) {
clearInterval(timeinterval);
}
}

updateClock();
var timeinterval = setInterval(updateClock, 100);
}

var deadline = new Date(Date.parse(new Date()) + 1 1 10 1 1000);
initializeClock('clockdiv', deadline);
</script>


<style>

body{
text-align: center;
font-family: 'open sans',sans-serif;
font-weight: 700;
}

h1{
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}

#clockdiv{
font-family: 'open sans',sans-serif;
color: black;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
font-weight:700;
}

#clockdiv > div{
border-radius: 3px;
display: inline-block;
}

#clockdiv div > span{
border-radius: 3px;
display: inline-block;
}

.noch {
display:inline-block;

}

.doppelpunkt {
display:inline-block;
margin-left:-7px;
margin-right: -7px;
}

.smalltext{
padding-top: 5px;
font-size: 16px;
}

.days {
display:none !important;
}

.hours {
display:none !important;
}



</style>

</body>
</html>
 
Java und Javascript sind 2 verschiedene dinge.
Bei mir läuft dein Script so nicht.
Die Konsole meckert bei der Zeile
Code: 
var deadline = new Date(Date.parse(new Date()) + 1 1 10 1 1000);
wundert mich irgendwie das es bei dir so laufen soll.

Bei mir gehts so

Link zur Lösung
 
Zuletzt bearbeitet:
Vielen Dank Basti!
Den Unterschied werde ich mir jetzt mal googlen und verinnerlichen, damit ich hier keine Schmerzen verursache bei den Profis :D

Der Timer funktioniert einwandfrei!
Könntest du mir bitte vil. kurz noch erklären, wie ich die Dauer der Zeit erhöhe und wie ich den Stundenzähler wegbekomme?

Liebe Grüße!
 
Armin77 hat gesagt.:
Könntest du mir bitte vil. kurz noch erklären, wie ich die Dauer der Zeit erhöhe und wie ich den Stundenzähler wegbekomme?
Zum Vergrößern anklicken....
Zeit erhöhen hier
Javascript: 
var stunden=0; //stunden
var minuten=0; //minuten
var sekunden=13; //sekunden

Stunden ausbauen kannst du mit Löschen der Zeilen
Javascript: 
<span class="hours"></span> :
var hou = clock.querySelector('.hours');
hou.innerHTML=('0' + Math.floor((t/1000/60)%60%60)).slice(-2);
var jahre=1;// noch nicht eingebaut
var tage=0;// noch nicht eingebaut
var stunden=0;//stunden
var stun=stunden*60*60*1000;
und die Zeile
Javascript: 
var plus=stun+minu+sekunden*1000;
so änderst
var plus=minu+sekunden*1000;

Sowas solltest du aber auch als Anfänger hinbekommen, du hast ja auch irgendwie einen halbwegs laufenden Timer schon selbst erstellt (oder irgendwo so gefunden).

Codepen ist auch eine Spielwiese.
Da kannst du, ohne Schaden anzustellen, einfach mal Zeilen löschen umbauen und hinzufügen, ohne das es ein Schadet und du lernst, was welcher Code so macht.

Die Konsole sollte dabei immer geöffnet sein damit du siehst was für Fehler du gerade gemacht hast , bzw. der Code produziert.
 
Danke dir vielmals Basti.

Ich probiere in der Regel viel herum und nutze die "Spielwiesen" gerne aus, nur in dem Fall hatte ich bisschen Zeitdruck, da es für ein eilendes Projekt gedacht war.

Auf dieses Forum ist Verlass.

Schöne Grüße
Armin
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück