Javascript - Uhr

Javascript: Nachfolgend wird der Code erläutert, wie eine Uhr aus Grafiken arbeitet.

Demo

So kann es aussehen:
Die Variante mit Grafiken ...
... oder Darstellung als Text:
[Uhrzeit]

Seitenanfang


Variante mit Grafiken

Das Ganze funktioniert im Zusammenspiel mit folgenden Komponenten, von denen man vor dem Weiterlesen schon einmal gehört haben sollte:

  • HTML: img-Tag und seine Attribute, Grafiken im Voraus laden
  • JavaScript: Datumfunktion, Objekte: date, document, images, math, windows
Wie es genau funktioniert?? Ganz Eilige können sich einfach mal den Quelltext ansehen. Allen anderen wird es nun ganz ausführlich erklärt...


Grafiken definieren

Im BODY-Bereich der HTML-Seite werden 5 Grafiken mit Hilfe des IMG-Tags nebeneinander angeordnet: je 2 für die 2-stellige Anzeige der Stunden und Minuten und ein Trenner. Um sicher zu gehen, dass kein Zeilen-Umbruch erfolgt, sind die Grafiken von einem NOBR-Tag eingeschlossen.
Mit SRC wird eine Grafik geladen; es gelten hier folgende Namenskonventionen (cl für "clock"):
* cl_dpt.gif - Doppelpunkt-Grafik
* cl_.gif - "leere" Grafik (zum Ausblenden des ":")
* cl_0.gif ... cl_9.gif - Zifferngrafiken

Die Grafikobjekte erhalten mit dem Attribut NAME einen Namen, womit sie später per JavaScript angesprochen werden:
* HZ = Zehnerstelle der Stunden
* HE = Einerstelle der Stunden
* DP = Doppelpunkt (Trennzeichen)
* MZ = Zehnerstelle der Minuten
* ME = Einerstelle der Minuten

   <HTML>
      <HEAD>
         ...
      </HEAD>
      <BODY>
         ...
      <NOBR>
        <IMG SRC="../graphic/cl_.gif" WIDTH="20" HEIGHT="30" NAME="HZ">
        <IMG SRC="../graphic/cl_.gif" WIDTH="20" HEIGHT="30" NAME="HE">
        <IMG SRC="../graphic/cl_.gif" WIDTH="10" HEIGHT="30" NAME="DP">
        <IMG SRC="../graphic/cl_.gif" WIDTH="20" HEIGHT="30" NAME="MZ">
        <IMG SRC="../graphic/cl_.gif" WIDTH="20" HEIGHT="30" NAME="ME">
      </NOBR>
      </BODY>
   </HTML>
Definieren der Grafiken


Seitenanfang



JavaScript

Mit Hilfe von JavaScript wird die aktuelle Systemzeit ermittelt:

   thedate = new Date();
   hours = thedate.getHours();
   minutes = thedate.getMinutes();

...und in die Zehner- und Einerstellen von Stunde und Minute aufgesplittet und in je einer Variable abgelegt.
Mit Hilfe der Eigenschaft SRC des Objektes "images" wird an der entsprechenden Stelle eine Ziffer mit Hilfe der Grafik "cl_[Ziffer].gif" angezeigt.

Die Funktion window.settimeout() ruft die eigene Funktion nach 2 Sekunden erneut auf, um die Systemzeit auszulesen und die Anzeige zu aktualisieren.

Der blinkende Doppelpunkt ist recht einfach realisiert: wenn gerade das "Leerzeichen" cl_.gif bei document.images.DP dargestellt wird, so wird der Doppelpunkt geladen; anderenfalls (da es nur 2 Zustände gibt) das Leerzeichen.
Mit dem Setzen des Intervalls in der o.g. Funktion window.settimeout() ist die Blinkfrequenz vorgegeben.

Zu guter letzt:
mit dem Laden des Dokuments soll die Uhr anfangen zu "laufen"? Es bietet sich das Event OnLoad des BODY-Tags an, in dem die JavaScript-Funktion erstmalig aufgerufen wird. Etwas umständlicher ist die Variante im BODY-Bereich inerhalb eines SCRIPT-Tags diese Funktion aufzurufen. Aber es geht natürlich auch...

Für alle Hungrigen gibt es hier den Quellcode des JavaScript-Anteils:


   <HTML>
      <HEAD>
         ...

         <script language=javascript>
         <!--
         function ah_clock()
         {
                 thedate = new Date();
                 hours = thedate.getHours();
                 minutes = thedate.getMinutes();

                 gif_base = "../graphic/cl_"
                 gif_ext = ".gif"

                 pic_hz=Math.round((hours+5)/10-1);
                 pic_he=hours - Math.round((hours+5)/10-1)*10;

                 pic_mz=Math.round((minutes+5)/10-1);
                 pic_me=minutes - Math.round((minutes+5)/10-1)*10;

                 document.images.HZ.src=gif_base + pic_hz + gif_ext;
                 document.images.HE.src=gif_base + pic_he + gif_ext;
                 document.images.MZ.src=gif_base + pic_mz + gif_ext;
                 document.images.ME.src=gif_base + pic_me + gif_ext;

                 my_string = document.images.DP.src;
                 if (my_string.indexOf("cl_.gif") > 0)
                         document.images.DP.src = gif_base + 'dpt' + gif_ext;
                 else
                         document.images.DP.src = gif_base + gif_ext;

                 window.setTimeout("ah_clock();",2000);
         }
         //-->
         </script>
      </HEAD>
      <BODY ... OnLoad="ah_clock()">
         ...
      </BODY>
   </HTML>
Javascript: Aktualisieren der Uhrzeit - Grafikvariante


Seitenanfang


Feintuning

Bei Wechsel der Anzeige von Stunden/ Minuten muss eine neue Grafik geladen werden. Damit dies (insbesondere bei Verwendung einer Internetseite) performant ist, müssen die Grafiken im Voraus geladen werden, d.h. in einem gerade sichtbaren oder vorher angezeigten Dokument müssen alle Grafiken einmal angezeigt werden, damit sie im Cache des Browser zwischengespeichert sind.

Verwendung von Frames:
Es bietet sich die Verwendung von Frames an. Bei der Definition eines Framesets kann man einem Frame die Option Scrolling=NO mitgeben. Dies bewirkt, dass sofern eine Webseite grösser ist, als der gerade sichtbare Bereich, keine Scrollbalken angezeigt werden, um zu unsichtbaren Bereichen wechseln können.
Dies kann man auch für seine Zwecke ausnutzen: verwendet man im BODY-Bereich eine Tabelle mit HEIGHT=100%, so kann man sicher sein, dass Elemente unterhalb dieser Tabelle im Browser nie sichtbar sind. Dort kann man einfach die Grafiken hintereinanderweg anzeigen lassen.

"unsichtbare" Grafiken
Wer keine Frames verwendet, dem bleibt die Möglichkeit, die Grafiken auf derselben Seite "vorzuladen". Mit Hilfe der Attribute HEIGHT und WIDTH des IMG-Tags kann man die angezeigte Grösse auf 1x1 Pixel * setzen - dies wird das menschliche Auge kaum wahrnehmen.

    <IMG SRC="grafik.gif" WIDTH="1" HEIGHT="1" ALT="">

Hat man mehrere Grafiken zum Vorladen, sollten die Grafiken nicht hintereinander im Dokument folgen. Man sieht dann evtl. mehrere aufeinanderfolgende Punkte. Besser ist es, sie auf der Seite verstreuen, um die kleinen Punkte dem Blick des Betrachters zu entziehen.

*noch eine Anmerkung:
Zuweilen findet man den Tipp, die Grösse 0x0 Pixel bei den unsichtbaren Grafiken zu verwenden. Es gibt Browser, die dann dazu neigen, das Bild Originalgrösse zu zeigen, was an dieser Stelle nicht der gewünschte Effekt ist. Die Angabe von 1x1 Pixel hingegen funktioniert immer.

... und noch eine andere Variante:
die im Voraus zu ladenden Grafiken kann man auch in einem unsichtbaren DIV-Tag verstecken:

    <DIV style="display: none;">
            <IMG SRC="grafik.gif" ALT="">
    </DIV>

Seitenanfang

Variante mit Text

Man kann auch auf die Freiheit beliebig gestaltbarer Grafiken verzichten und stattdessen mit reiner Textdarstellung arbeiten. Zur Formatierung kann/ muss man CSS verwenden.

Man braucht dazu ein HTML-Element, dem man eine ID gibt: 

<span id="uhralstext"></span>

... und per Javascript schreibt man in das Element dieser ID mit der Eigenschaft InnerHTML die hinein:
document.getElementById('uhralstext').innerHTML=sUhrzeit;

Und so sieht es komplett als Funktion aus:
function ah_clock2()
{
        thedate = new Date();
        hours = thedate.getHours();
        minutes = thedate.getMinutes();

        var sUhrzeit='';

        // Stunde
        sUhrzeit+=Math.round((hours+5)/10-1);
        sUhrzeit+=hours - Math.round((hours+5)/10-1)*10;

        // Doppelpunkt oder Leerzeichen
        if (document.getElementById('uhralstext').innerHTML.indexOf(':')>0) sUhrzeit+=' '
        else  sUhrzeit+=':';

        // Minuten
        sUhrzeit+=Math.round((minutes+5)/10-1);
        sUhrzeit+=minutes - Math.round((minutes+5)/10-1)*10;

        document.getElementById('uhralstext').innerHTML=sUhrzeit;

        window.setTimeout("ah_clock2();",2000);
}
Javascript: Aktualisieren der Uhrzeit - Textvariante


Seitenanfang