Sirko: Format-Änderungen bei JS-Zeitausgabe

SELF-Forum

Format-Änderungen bei JS-Zeitausgabe

Sirko
– Informationen zu den Bewertungsregeln

Hallo allerseits,

ich kenne mich nicht allzusehr mit JS aus, denn ich bin bislang immer mit Ausprobieren und Nachlesen bei konkreten Fragen weitergekommen. Nun bin ich jedoch an folgendem Problem gescheitert:

Ich möchte auf einer Webseite das aktuelle Datum + die aktuelle Zeit
eines anderen Landes anzeigen und habe das mit einem angepassten Script aus dem Forum hier gelöst.

Die Ausgabe ist z.B.: Montag, 30. Juni 2003 06:09:02

Allerdings hätte ich gern (aus Platzgründen) eine kürzere Version der Darstellung, nämlich so: Mo - 30.06.03 - 06:09:02 oder wenn's denn gar nicht anders geht: Mo 30.06.03 06:09:02

Leider habe ich nicht die geringste Idee, wie das Format beeinflusst werden kann und bin für jeden Tipp dankbar!

Gruß
Sirko

hier das Script:

<html>
<head>
<title>Datum</title>
<script language="JavaScript" type="text/javascript">
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 ZeitAnzeigen()
{
 Zeit = ZeitOffset(7,0);
 document.uhr.vietnam.value = Zeit.toLocaleString();
 window.setTimeout("ZeitAnzeigen()",1000);
}
//-->
</script>
</head>
<body onload="ZeitAnzeigen();">
<form name="uhr">
Vietnam-Zeit:   <input type="text" name="vietnam" size="30" readonly>
</form>
<p> </p>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Format-Änderungen bei JS-Zeitausgabe

    molily
    – Informationen zu den Bewertungsregeln

    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

    --
    Ein Mensch ist mehr als (.*[a-zA-Zäöü]{2,}.*_.*[a-zA-Z]{2,}.*_+<.*\w.*@{1}\w+.*.[a-zA-Z]{2,4}>)|(\w+@{1}\w+.*.[a-zA-Z]{2,4}_+(.*[a-zA-Zäöüäöü]{2,}.*_.*[a-zA-Zäöü]{2,}.*)) erfassen kann.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Format-Änderungen bei JS-Zeitausgabe

      Sirko
      – Informationen zu den Bewertungsregeln

      Hallo Mathias,

      WOW!

      vieles hatte ich schon gelesen und auch manchen Tipp aus dem Forum ausprobiert, aber um das Ganze im Zusammenhang hinzukriegen, benötigt man doch schon ziemlich viel Praxis - Danke!

      Soweit verstanden...?

      ich denke schon... das mit der führenden Null hat mir gleich noch bei einem anderen Problem geholfen - toll!

      ...es funktioniert auch alles prima!

      Eine Frage fällt mir noch ein:
      Gibt es auch die Möglichkeit, das Ganze ohne das Input-Feld darzustellen (als einfache Textzeile oder mitten in einem Satz), damit man das ganze besser in's Layout der Seite einfügen kann?

      (sonst bliebe wohl nur die Möglichkeit, mit CSS die Schrift, den Rand und die Farbe des Formularfeldes irgendwie anzupassen, aber das wollte ich umgehen, da es auf der Seite noch andere Formularfelder gibt und die CSS-Definitionen doch immer für ALLE Felder gelten, oder?)

      Viele Grüße

      PS.: huch...waren eigentlich 2 Fragen...grins...
      Sirko

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Format-Änderungen bei JS-Zeitausgabe

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        Eine Frage fällt mir noch ein:
        Gibt es auch die Möglichkeit, das Ganze ohne das Input-Feld darzustellen (als einfache Textzeile oder mitten in einem Satz), damit man das ganze besser in's Layout der Seite einfügen kann?

        in einem DOM-fähigen browser könntest du z.b. den dateninhalt eines textknotens austauschen bzw. erneuern,
        http://www.selfhtml.net/javascript/objekte/node.htm#data

        gruss,
        wahsaga

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Format-Änderungen bei JS-Zeitausgabe

          Sirko
          – Informationen zu den Bewertungsregeln

          Hallo wahsaga,

          uff, das ist wohl noch etwas zu hoch für mich -
          ich bekomme damit keine "LAUFENDE" Zeit hin, sondern nur die beim Laden des Dokumentes... oder mache ich da was falsch?

          trotzdem erst mal vielen Dank!!!

          hm, so nebenbei fällt mir ein, dass Vietnam ja keine Sommerzeit-Umstellung mitmacht, so müssten im Sommer und im Winter eigentlich unterschiedliche Zeitdifferenzen bei
           Zeit = ZeitOffset(7,0);
          berücksichtigt werden...

          Gibt es da einen Weg?

          Oder falls nicht - kann man das irgendwo zentral auslesen lassen?
          (die Zeit soll nämlich auf mehreren Seiten angezeigt werden (weil Tabellen-Layout, keine Frames), dann müsste auf JEDER Seite zum Sommerzeit-Wechsel das Script geändert werden. Da wäre es zwar immer noch manuell, aber schon viel praktischer, wenn alle Seiten die Zeitdifferenz aus einer Datei auslesen könnten, dann bräuchte man wenigstens nur diese eine Datei ändern.)

          Gruß
          Sirko

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Format-Änderungen bei JS-Zeitausgabe

            wahsaga Homepage des Autors
            – Informationen zu den Bewertungsregeln

            hi,

            uff, das ist wohl noch etwas zu hoch für mich -
            ich bekomme damit keine "LAUFENDE" Zeit hin, sondern nur die beim Laden des Dokumentes... oder mache ich da was falsch?

            du musst den vorgang natürlich wiederholt ausführen.

            gruss,
            wahsaga

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Format-Änderungen bei JS-Zeitausgabe

              Sirko
              – Informationen zu den Bewertungsregeln

              Hi wahsaga,

              ...ich hab's nicht hinbekommen und die "stehende" Zeit hatte ich auch nur in dem Popup-Fenster - ich glaube, das geht sowieso ein bischen in eine andere Richtung, als mir vorschwebte...
              Jedenfalls habe ich's bislang nicht geschafft eine dynamische Zeit mitten im Text bzw. nicht in einem Eingabefeld hinzubekommen...

              ich danke Dir!

              vielleicht hat jemand noch eine andere Idee?
              ...und das mit der Sommerzeit-Umstellung?

              Viele Grüße
              Sirko

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln