Counter mit mehreren "Ziel-Date"s
Anthony DiNozzo
- javascript
Moin moin liebe SelfHTML-Comunity,
ich möchte auf meiner Website gerne einen Counter einrichten, dafür habe ich auch schon einen Code (siehe unten). So weit so gut, doch ich habe unterschiedliche Ziel-Dates;
Mein Counter soll nicht auf EIN Datum im Jahr gerichtet sein sondern auf mehrere in verschiedenen Monaten, nämlich immer dann wenn Vollmond ist (die Uhrzeit ist mir egal es geht nur um das Datum).
Quellcode für bestimmtes datum im jahr:
// Ziel-Datum in MEZ
var jahr=2222, monat=2, tag=22, stunde=22, minute=22, sekunde=22;
var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);
function countdown() {
startDatum=new Date(); // Aktuelles Datum
// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
if(startDatum<zielDatum) {
var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;
// Jahre
while(startDatum<zielDatum) {
jahre++;
startDatum.setFullYear(startDatum.getFullYear()+1);
}
startDatum.setFullYear(startDatum.getFullYear()-1);
jahre--;
// Monate
while(startDatum<zielDatum) {
monate++;
startDatum.setMonth(startDatum.getMonth()+1);
}
startDatum.setMonth(startDatum.getMonth()-1);
monate--;
// Tage
while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
tage++;
startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
}
// Stunden
stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);
// Minuten
minuten=Math.floor((zielDatum-startDatum)/(60*1000));
startDatum.setTime(startDatum.getTime()+minuten*60*1000);
// Sekunden
sekunden=Math.floor((zielDatum-startDatum)/1000);
// Anzeige formatieren
(jahre!=1)?jahre=jahre+" Jahre, ":jahre=jahre+" Jahr, ";
(monate!=1)?monate=monate+" Monate, ":monate=monate+" Monat, ";
(tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, ";
(stunden!=1)?stunden=stunden+" Stunden, ":stunden=stunden+" Stunde, ";
(minuten!=1)?minuten=minuten+" Minuten und ":minuten=minuten+" Minute und ";
if(sekunden<10) sekunden="0"+sekunden;
(sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";
document.countdownform.countdowninput.value=
jahre+monate+tage+stunden+minuten+sekunden;
setTimeout('countdown()',200);
}
// Anderenfalls alles auf Null setzen
else document.countdownform.countdowninput.value=
"0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden";
}
<body onload="countdown()">
<form name="countdownform">
<p>
<input size="75" name="countdowninput">
</p>
</form>
</body>
</html>
Wie soll ich diesen Code jetzt umwandeln?
Mit freundlichen Grüßen
Thony
Hi,
ich bins nochmal ich formuliere die Frage mal um:
Wie kriege ich in folgenden Code ein zweites Datum rein???
var jahr=2011, monat=2, tag=24, stunde=00;
var zielDatum=new Date(jahr,monat-1,tag,stunde);
function countdown() {
startDatum=new Date(); // Aktuelles Datum
// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
if(startDatum<zielDatum) {
var jahre=0, monate=0, tage=0, stunden=0;
// Jahre
while(startDatum<zielDatum) {
jahre++;
startDatum.setFullYear(startDatum.getFullYear()+1);
}
startDatum.setFullYear(startDatum.getFullYear()-1);
jahre--;
// Monate
while(startDatum<zielDatum) {
monate++;
startDatum.setMonth(startDatum.getMonth()+1);
}
startDatum.setMonth(startDatum.getMonth()-1);
monate--;
// Tage
while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
tage++;
startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
}
// Stunden
stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);
// Anzeige formatieren
(jahre!=1)?jahre=jahre+" Jahre, ":jahre=jahre+" Jahr, ";
(monate!=1)?monate=monate+" Monate, ":monate=monate+" Monat, ";
(tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, ";
(stunden!=1)?stunden=stunden+" Stunden":stunden=stunden+" Stunde";
document.countdownform.countdowninput.value=
jahre+monate+tage+stunden;
setTimeout('countdown()',200);
}
// Anderenfalls alles auf Null setzen
else document.countdownform.countdowninput.value=
"0 Jahre, 0 Monate, 0 Tage, 0 Stunden";
}
Wie kriege ich in folgenden Code ein zweites Datum rein???
Ganz einfach. Ruf die Funktion mit dem Datum als Parameter aus und bau die Funktion so um, dass sie das übergebene Datum nutzt. Globale Variablen sind eh nicht optimal und hier völlig unnötig.
Ganz einfach.
klingt gut
Ruf die Funktion mit dem Datum als Parameter aus
ab hier nicht mehr wirklich - wie geht das?
und bau die Funktion so um, dass sie das übergebene Datum nutzt.
Nochmal die selbe Frage: Wie geht das?
Jetzt hab ich zumindest mal einen Anfang auch wenn ich damit nicht viel anfangen kann :P
trotzdem Danke
Thony
Ruf die Funktion mit dem Datum als Parameter aus
ab hier nicht mehr wirklich - wie geht das?und bau die Funktion so um, dass sie das übergebene Datum nutzt.
Nochmal die selbe Frage: Wie geht das?
Lies dir mal das Kapitel über Javascript bei Selfhtml durch. Ist eine einfache Grundlage bei Funktionen. Es bringt dir auf Dauer nicht wirklich was, wenn ich dir die Lösung einfach so poste, auch wenns nur ne kleine Veränderung ist.
Lies dir mal das Kapitel über Javascript bei Selfhtml durch. Ist eine einfache Grundlage bei Funktionen. Es bringt dir auf Dauer nicht wirklich was, wenn ich dir die Lösung einfach so poste, auch wenns nur ne kleine Veränderung ist.
danke herr lehrer
wollte ja auch nicht (unbedingt) das mir einer die fertige lösung serviert, hätt mir nur nen link zu dem bereich des JS-Kapitels gewünscht den i8ch brauche damit ich nich ne ewigkeit am suchen bin
trotzdem danke
Thony
http://de.selfhtml.org/javascript/sprache/funktionen.htm
Ich hab dir gesagt, es handelt sich um eine Funktion, da hättest du maximal 2 Minuten gesucht. Hat sicher länger gedauert, zu posten ...
Lieber Anthony,
Dein Script umzubauen bedeutet, Dein Script zu verstehen. Das ist jetzt vielleicht viel verlangt, aber das hier ist ja auch das SELFHTML-Forum, bei dem SELF vorausgesetzt wird.
Um Dein Verständnis von JavaScript zu fördern, schlage ich vor, Du beschäftigst Dich mit <http://de.selfhtml.org/javascript/sprache/funktionen.htm@title=Funktionen in JavaScript>. Dort steht z.B. auch, dass man einer Funktion Parameter übergeben kann, mit denen diese dann arbeitet.
Wenn Du so weit durchgestiegen bist, dann kannst Du Dich mit der <http://de.selfhtml.org/javascript/sprache/variablen.htm@title=Frage "globale Variablen" versus "lokale Variablen"> beschäftigen. Das Prinzip ist für alle wesentlichen Programmiersprachen gültig, sodass Du hier (ebenso wie beim Aufrufen von Funktionen) gleich für mehrere Programmiersprachen gleichzeitig lernst.
Wenn Du diese beiden Aspekte verstanden hast, dann kannst Du versuchen, Dein Beispiel entsprechend zu verändern. Solltest Du unterwegs aber feststellen, dass es wohl noch hie und da an Verständnis mangelt, dann kannst Du im <http://de.selfhtml.org/navigation/syntax.htm#javascript@title=Syntaxverzeichnis von SELFHTML zu JavaScript> die entsprechenden Funktionen und ihre Wirkungsweise samt ihrer Verwendung nachschlagen. Und sollte das alles dann noch immer nicht genügen, dann kann ich Dich auf meinen Artikel verweisen, der auch mit Timer-gesteuerten Funktionsaufrufen arbeitet.
Für konkrete Fachfragen ist ja auch noch das Forum da.
Liebe Grüße,
Felix Riesterer.
Hallo,
ich werde wohl nie verstehen, warum
document.countdownform.countdowninput.value=
jahre+monate+tage+stunden+minuten+sekunden;
bei einem Ereignis, das Jahre in der Zukunft liegt, der Counter sekundengenau sein muss, und warum
setTimeout('countdown()',200);
dieses auch noch fünf mal pro Sekunde aktualisiert werden muss.
Gruß, Jürgen