Dynamische Balkenuhr
 HomeZeit • Counter Balkenuhr Demo  ScriptCode   drucken  Seite drucken

dynamische Uhrzeitanzeige 'Balkenuhr'

Das Beispiel bietet die Möglichkeit zur dynamischen Anzeige der Zeit. Die Anzeige erfolgt in 'unsichtbaren' Formularfeldern. Stunden, Minuten und Sekunden werden dynamisch dürch kleine Balkensegmente angezeigt.
uhrzeit clock dynamisch balkenuhr Std Min Sek

Teile eines Textstrings (uhrzeitabhängig) anzeigen

Ein Script von Abraham I. das lediglich im IE funktionierte, habe ich modifiziert und erweitert. Das Ganze ist nun per 'getElementById' umgesetzt und die Anzeige etwas ansprechender gestaltet. Der Tabellenrand ist hier zur Verdeutlichung sichtbar eingestellt. Die Uhrzeit wird zusätzlich eingeblendet.

'Spielkram' oder witzig? Auf jeden Fall ein gutes JavaScript-Beispiel zur Entnahme von Teilen aus einem Textstring bzw. splitten von Text-Strings [mit 'substr()' ] abhängig von externen Werten.

Stunden:
Minuten:
Sekunden:
Zeit:

(Das könnte man natürlich auch alles innerhalb einer Zeile anzeigen)


   Die Umsetzung

Das kennen sie bereits: Eine einfache Möglichkeit nach dem Aufbau der HTML-Seite den Inhalt auch im Nachhinein zu verändern bietet sich mit Hilfe eines Formularfeldes, in dem die dynamischen Daten angezeigt werden. Das Formularfeld wird mit Hilfe von CSS-Angaben (für den Rand) 'unsichtbar', als solches nicht mehr erkannt.

Das JavaScript ermittelt laufend die aktuelle Zeit und entnimmt die Werte für Stunden, Minuten und Sekunden.

Ich habe eine Variable mit 60 Zeichen (|) gefüllt. Abhängig vom aktuellen Zahlenwert für Stunden, Minuten und Sekunden werden entsprechend viele Elemente des Textstrings aus der Variablen verwendet. Das das Ergebnis wird regelmäßig (jede Sekunde) in die 3 Formularfelder geschrieben.

var units = ("|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||");
| (senkrechter Strich UNICODE: 007C) charset=iso-8859-1



   generelle Formatierung der Input-Textfelder

Die Formularfelder sollen als solche nicht erkennbar sein. Mit CSS-Angaben im HEAD-Bereich lässt sich das umsetzen. Ich habe eine eigene Klasse definiert.

Es gibt eine generelle Formatierung für Formularfelder (<input>) und zusätzliche Angaben für die Formularfelder der Balkenanzeige mit der Unterklasse 'input.balken'.

So können sie die Balkenanzeige unabhängig von den Textanzeigen formatieren.

<style type="text/css">
<!--

input {
 color: #000000;
 background: #FFFFFF;
 border: none;
}

input.balken {
 color: #FF0080;
 background: #FFFFFF;
 font-weight:bold;
 border: none;
 width: 350px;
 font-family: Arial, sans-serif;
 font-size: 14px;
}

-->
</style>



   Unterschiedliche Farbgebung

Die Textfarben der 3 Anzeigen sind mit CSS-Inline-Anweisungen an Ort und Stelle (im <input>-Tag) noch einmal unterschiedlich festgelegt.

<input class="balken" ... id="seconds" style="color:#0090E0">
Analog dazu könnten Sie die Farben für Minuten und Stunden eintragen / ändern.





Das könnte Sie auch interessieren: