 UpDownCounter 04-02 Uhr CSS-positionierte Elemente
Dieses JavaScript errechnet aus dem Systemdatum und ihrer Vorgabe die Differenz und zeigt die Tages-, Stunden-, Minuten- und Sekundenwerte als grafischen Counter mit digitalen Ziffern an. Zwei Texte mit unterschiedlichen Formatierungen werden angezeigt.
|
|
grafischer Up- / Down-Counter - Hintergrundgrafik + 2 Texte
Sie können 2 Texte in der Anzeige selbst definieren!
Der Counter ermöglicht in dieser Konstellation die Anzeige von 9 grafischen Ziffern und stellt den Wert im Format DDD:HH:MM:SS (deusch: TTT:SS:MM:SS) dar. Dazu werden Grafiken zeitgesteuert ausgetauscht. Ein Zählvorgang kann die Maximal- und Minimalwerte 999:23:59:59 anzeigen, also für einen Zeitraum von 2,73 Jahren in beide Zählrichtungen eingesetzt werden.
EventCounter als Armbanduhr
Die beiden Texte oberhalb der Ziffernanzeige können sie selbst bestimmen und so den Up-Down-Counter dem Thema Ihrer Seite anpassen.
Beispiel Text 1: Sommerfereien<br>Downcounter
Beispiel Text 2: Grundschule Würm
Danach ändert sich der DownCount in einen UpCount.
Bei diesem Counter verwende ich ausschließlich CSS-Formatierungen zur Positionierung der einzelnen Elemente der Uhr.
Den Div-Beich User und die beiden angezeigten Texte können sie leicht formatieren bzw. eigene kurze Texte eintragen. Wenn sie die Grafik zur Anzeige der dargestellten Einheiten unterhalb des Counters weglassen, haben sie weitere 14 Pixel gewonnen und könnten für den Div-Bereich 'text2' eine zweite Textzeile einplanen.
Die Texte wurden 2 Variablen zugewiesen. Das Script bindet die Inhalte der beiden Variablen bei der Anzeige des Counters ein.
Variieren sie außerdem durch den Einsatz einer anderen Hintergrundgrafik.
|
|
Aufwand für den Webmaster
1) Script in den Head-Bereich kopieren
2) Aufruf der Funktion in den Body-Bereich kopieren
3) Grafiken im Unterordner 'images' abspeichern
4) gegebenenfalls Variablen anpassen
5) gegebenenfalls CSS-Angaben anpassen
Bitte entnehmen Sie den gesamten Quellcode für dieses Modul der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript finden Sie im  JavaScript Menü 01 oder gezielt auf der Seite Kurzinfo JavaScript 'einbauen'
1 Notierung im Body
Nachdem Sie das JavaScript im Head-Bereich notiert haben und die Grafiken abgespeichert haben muss die Funktion zur Anzeige des Counters im Body-Bereich nur noch aufgerufen werden. Sie tragen den Funktionsaufruf an genau der Stelle ein, wo der Counter erscheinen soll.
<script type="text/javascript" language="JavaScript">
<!-- Begin
UhrSchreiben()
// End -->
</script>
2 Variablen
Um die Anpassung des Counters flexibel zu gestalten habe ich in diesem Modul für wichtige Elemente Variablen verwendet:
var dann = new Date('August 17 2009 00:00:01');
var Text1 = "Sommerferien<br>Downcounter";
var Text2 = "KGS Würm";
var Trennzeichen = "images/sw11.gif"; // Doppelpunkt
var Platzhalter = "images/sw8.gif";
var Einheiten = "<img src='images/einheiten128.gif' ... alt=''>"
Die erste Variable 'dann' enthält das Zieldatum. Zur Notierung des Zieldatums in englischer Schreibweise habe ich im Quelltext eine Hilfe für die Monatsnamen vorgesehen. Die Variablen 'Text1' und 'Text2' sind für den Kurztext vorgesehen. Für das Trennzeichen zwischen den Werten ist die Variable 'Trennzeichen' reserviert. Pfad und URL für die Grafik der Ziffer 8 wird der Variablen 'Platzhalter' zugewiesen.
 einheiten128-02.gif
Die Variable 'Einheiten' enthält als Wert den Pfad und die URL für die Grafik 'Tage Std Min Sek'.
var Text1 = "Vereinsmeisterschaft<br>Ikarus Geilenkirchen";
var Text2 = "27. August 2010 - 10 Uhr";
3 Zifferngrafiken
Für einen schnellen Zugriff werden die Zifferngrafiken sw0.gif - sw9.gif
in einen Array eingelesen:
// pfad und Dateinamen (ohne Ziffer) für die Grafiken
// für die Grafiken sw0.gif, sw1.gif, sw2.gif, ... sw9.gif
imgarr[i].src = "images/sw" + i + '.gif';
Wenn sie sämtliche Grafiken im Unterordner 'images' abspeichern, müssen die Angaben nicht geändert werden.
 JavaScript in ein HTML-Dokument 'einbauen'
4 Anpassungen
Für den Div-Berich 'user' und die beiden Texte können sie die CSS-Angaben anpassen um Rand, Schrifttype, Textgröße und -farbe zu verändern.
#user {
border:1px solid #EED5FF;
align:center;
position:relative;
top:75px; width:130px; height:60px;
}
#text1 {
margin-top:5px;
text-align:center;
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size:16px;
color:#ECCEFF;
font-weight:bold;
}
#text2 {
text-align:center;
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size:12px;
color:#EED5FF;
font-weight:normal;
}
Hintergrundgrafiken für diesen Counter
Die verwendete Hintergrundgrafik hat die Abmessungen 200 x 262 px . Eine Grafik ist im Download enthalten. Wenn Sie eine andere verwenden möchten laden sie die Grafik hier herunter und ändern den Dateinamen im ScriptCode.
 
 
Die Grafik wird mittels CSS-Angaben innerhalb der Notierung für den Div-Bereich 'Uhr' eingebunden.
#Uhr {
...
background:url(images/web-20-clock-10.gif) #FFFFFF;
}
Info zu den verwendeten Ziffern-Grafiken
Es werden 10 Zifferngrafiken (schwarz / transparent, 14 x 12 Pixel) und
eine weitere für das Trennzeichen (14 x 5 Pixel) verwendet:
          
Ziffern-Grafiken in den Farben Rot auf weißem Hintergrund könnten sie ebenfalls einsetzen:
          
Varianten durch alternative Ziffern-Grafiken
Meine Counter-Module werden in unterschiedlichen Varianten angeboten. Für die Beispiele werden in Farbe und Größe abweichende Zifferngrafiken eingesetzt und außerdem kann die Hintergrundfarbe und Umrandung mit CSS-Angaben ändern. Countervarianten finden Sie im Menü links.
|
NEU
|
Ich habe heute unterschiedliche Sätze digitaler Ziffern zum Download auf meine MINI-IMAGE-BOX hochgeladen. Die Auswahl soll später noch erweitert werden. Wenn sie möchten, können sie also weitere, eigene Varianten des Counters mit diesen Grafiken erstellen.
|
8000 Minigrafiken für Ihre Webseite  zur Mini-Image-Box 
Eine Downloadmöglichkeit und Übersicht finden Sie auch innerhalb meiner Web-Toolbox. Besuchen Sie die Seite digitale Ziffern (Grafiken)
(allerdings ist die gespiegelte Seite nicht immer auf dem neuesten Stand)
Auszug des Angebots als Screenshot
|
Home • Datum • UpDownCounter 04-02
DOWNLOAD
