Downcounter Silvester 02
    
 HomeZeit • Counter bis Neujahr 02 QuellCode   drucken  Seite drucken

 Silvestercounter 02

Dynamischer Downcounter bis zum 31. Dezember 24 Uhr des laufenden Jahres. Darstellung als Text in einem 'unsichtbaren' Formularfeld.

dynamische Datums- Uhrzeitinformationen im Formularfeld

Die Funktion 'showtime()' entnimmt im Abstand von 1 Sekunde dem Systemdatum den aktuellen Wert. Aus diesem Wert werden verbleibenden Monate, Tage, Stunden, Minuten und Sekunden bis zum Zieldatum 31.Dez. 24 Uhr ermittelt und angezeigt.

Anzeige: Monate - Tage - Stunden - Minuten - Sekunden

Der Einfachheit halber werden die Informationen in einem 'unsichtbaren' / nicht als solches erkennberen Formularfeld angezeigt. Keine aufwändige Positionierungs-Anweisungen für die unterschiedlichen Browser. Die Information wird genau dort angezeigt, wo sie das Formularfeld für die Anzeige notieren.

(Hier ist das Formularfeld noch erkennbar)



   Aufwand zum 'Einbau' des Scripts

  • Script in den Head-Bereich kopieren
  • Formular im Body-Bereich notieren
  • Anzeigefeld / - text formatieren


Ausgabe / Anzeige des Counters

Im Body-Bereich an entsprechender Stelle notieren:
<form>
<input class="anzeige" id="Zeit" type="text" readonly>
</form>

Mit CSS-Anweisungen im Head der Seite werden Angaben für die Unterklasse 'anzeige' fetgelegt:
<style type="text/css">
<!--

.anzeige {
font-size:12px;
color:#6F6F6F;
background-color: #F0F4FF;
text-align:center;
border: 1px solid #6F6F6F;
width: 545px;
padding:3px;
height: 24px;
}

-->
</style>


   'unsichtbares' Formularfeld

Wenn sie Rand- und Hintergrundfarbe ihrem Seitenhintergrund anpassen (identische Farbwerte), ist das Formularfeld als solches nicht erkennbar!
<style type="text/css">
<!--

.anzeige {
font-size:12px;
color:#0000FF;
background-color: #FFFFFF;
text-align:center;
border: none;
width: 545px;
padding:3px;
height: 24px;
}

-->
</style>



Bemerkung

Bei diesem Beispiel nutze ich nicht das simplere Verfaheren zwei Datumswerte (Silvester und Heute) einfach zu subtrahieren, mit

var Differenz = Silvester.getTime() - Heute.getTime();

sondern zeige wie man den Wert auf Grund der unterschiedlichen Längen der einzelnen Monate berechnet. Dabei muss man auf jeden Fall eine Untersuchung Schaltjahr ja / nein anstellen. Eine umständliche Berechnungsweise, aber als Demo zum Verfahren zur Berechnung von Datumswerten gut geeignet.








Downcounter für die Statuszeile

Downcounter bis 24 Uhr (große Ziffernanzeige)