Format-Änderungen bei JS-Zeitausgabe

[molily]

Hallo Sirko,

Zeit = ZeitOffset(7,0);
 document.uhr.vietnam.value = Zeit.toLocaleString();

Deine Variable »Zeit« ist vom Typ Date. Das heißt, sie speichert einen Zeitpunkt und du kannst einzelne Werte dieses Zeitpunktes über die Methoden des Objektes abfragen. Das sind die Methoden, die mit einem »get« beginnen: http://selfhtml.teamone.de/javascript/objekte/date.htm

Zeit.getHours() liefert dir also beispielsweise die Stunde und so weiter. Diese Abfragen bzw. Methodenaufrufe kannst du mit anderen Strings mit Trennzeichen in einem String aneinanderreihen, beispielsweise:

document.uhr.vietnam.value = Zeit.getDate() + '.' + (Zeit.getMonth()+1) + '.' + Zeit.getYear();

Das »+« verkettet die Einzelstrings. Das würde schon einmal ungefähr »30.6.2003« ergeben, beziehungsweise in einigen Browsern »30.6.103«. Mit Stunden, Minuten und Sekunden ist es ähnlich und auch für diese existieren get-Methoden.

Daraufhin stellt sich die Frage, wie mit einstelligen Werten umgegangen wird, denn sie sollen eine führende Null haben, falls sie kleiner als 10 sind. Dazu eigenet sich am besten eine Funktion, welche eben dies prüft und falls nötig eine »0« anhängt:

function zweistellig (wert) {
 return (wert<10)?'0'+wert:wert;
}

return (wert<10)?'0'+wert:wert; ist die Kurzschreibweise für if (wert<10) {return '0'+wert;} else {return wert;}.

zweistellig(Zeit.getMonth()+1) würde also »06« liefern (das +1 ist notwendig, weil die Zählung bei Null beginnt und somit für Januar 0 geliefert wird und für Juni 5) und so weiter.

Bliebe noch das Problem mit dem Wochentag, welcher nicht nur als Nummer, sondern auch als kurzer Name angezeigt werden soll. Zeit.getDay() liefert nur eine Nummer, 0 für Sonntag, 1 für Montag usw. und 6 für Samstag. Also wird ein Array definiert, welcher den Nummern die Abkürzungen zuweist:

var wochentage=['So','Mo','Di','Mi','Do','Fr','Sa'];
Das ist die Kurzschreibweise für: var wochentage=new Array('So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa');

wochentage[0] ist somit »So«, wochentage[1] »Mo« und so weiter. wochentage[Zeit.getDay()] liefert die Abkürzung für die durch Zeit.getDay() zurückgegebene Wochentagnummer.

Nun muss darauf reagiert werden, dass einige Browser bei getYear() eine volle Jahresangabe (»2003«) und andere die Anzahl der Jahre seit dem Jahre 1900 liefern (»103«). Wie in Selfhtml in den Beispielen beschrieben, wird das Jahr erst einmal auf die vierstellige Variante gebracht:

var jahr=Zeit.getYear();
if (jahr<999) jahr+=1900; /* Falls die Zahl kleiner als 999 ist, addiere 1900 */

Damit sollte die Variable jahr eine vierstellige Zahl enthalten. Von dieser Zahl sind aber nur die letzen beiden Stellen relevant für die Kurzdarstellung »03«. Dazu bietet sich die Methode substr() http://selfhtml.teamone.de/javascript/objekte/string.htm#substr an, mit welcher sich die letzten beiden Ziffern extrahieren lassen. Da die Variable jahr aber eine Zahl ist (also vom Typ Number), sollte sie zuerst mit toString() in ein String-Objekt umgewandelt werden. Zusammengefasst bedeutet das:

jahr=jahr.toString().substr(2);

Wenn jahr vorher den Wert »2003« enthält, sollte jahr nach der Anweisung »03« enthalten. Der substr()-Parameter »2« bedeutet, dass ab der dritten Stelle (dem Index zwei, die Zählung beginnt bei Null) des Strings bis zum Ende des Strings Zeichen extrahiert werden sollen.

Diese Erkenntnisse zusammengefasst sähen also folgendermaßen aus:

document.uhr.vietnam.value=wochentage[Zeit.getDay()]+' - '+zweistellig(Zeit.getDate())+'.'+zweistellig(Zeit.getMonth()+1)+'.'+jahr+' - '+zweistellig(Zeit.getHours())+':'+zweistellig(Zeit.getMinutes())+':'+zweistellig(Zeit.getSeconds());

Das geänderte Script insgesamt:

<script type="text/javascript">
var wochentage=['So','Mo','Di','Mi','Do','Fr','Sa'];
function ZeitOffset (Stunde_dif, Minute_dif) {
 var Jetzt = new Date();
 Jetzt.setHours(Jetzt.getHours() + parseInt(Jetzt.getTimezoneOffset() / 60) + parseInt(Stunde_dif));
 Jetzt.setMinutes(Jetzt.getMinutes() + (Jetzt.getTimezoneOffset() % 60) + parseInt(Minute_dif));
 return (Jetzt);
}
function zweistellig (wert) {
 return (wert<10)?'0'+wert:wert;
}
function ZeitAnzeigen() {
 Zeit = ZeitOffset(7,0);
 var jahr=Zeit.getYear();
 if (jahr<999) jahr+=1900;
 jahr=jahr.toString().substr(2);
 document.uhr.vietnam.value=wochentage[Zeit.getDay()]+' - '+zweistellig(Zeit.getDate())+'.'+zweistellig(Zeit.getMonth()+1)+'.'+jahr+' - '+zweistellig(Zeit.getHours())+':'+zweistellig(Zeit.getMinutes())+':'+zweistellig(Zeit.getSeconds());
 window.setTimeout('ZeitAnzeigen()', 1000);
}
</script>

Soweit verstanden...?

(Und ja, es geht sicherlich effizienter... Ich habe auch sicherlich irgendetwas triviales übersehen.)

Mathias