 Datum / Zeit Anzeige im Formularfeld
In einem Formularfeld wird das Datum angezeigt. Bei einem bestimmten Ereignis (Event) wird die Anzeige des datum gegen die Anzeige der Uhrzeit ersetzt und umgekehrt. Auslösender Event hier: MouseOver / MouseOut.
Das Formularfeld wurde mittels CSS so formatiert, damit es nicht als solches zu erkennen ist.
|
Der Wechsel der Anzeige könnte naturlich auch durch andere Ereignisse ausgelöst werden. In diesem Beispiel: MouseEvent für einen Textlink. Die Der Monatswert wird 2-stellig angezeigt, die Minutenanzeige erfolgt ebenfalls 2-stellig.
|
|
Als auslösenden Event könnte man auch durch eine Prüfung des Sekundenwertes alle 10 Sekunden einen Wechsel erzwingen mit einer Anweisung wie:
Wenn Ergebnis aus Sekundenwert % 20 < 10 dann Datum anzeigen
Wenn Ergebnis aus Sekundenwert % 20 > 10 dann Zeit anzeigen
Rest aus der Division des Sekundenwertes (geteilt) durch 20 [% = Modulo, Division mit Rest]
Formatierung
Formatierung des Formularfeldes mit CSS-Anweisungen:
<input type="text" readonly="readonly" style="Anweisungen" ...
Für "Anweisungen" setzen sie nach Geschmack folgende Werte ein:
font-family:Arial,Helvetica;
font-size:13;
color:#000000;
border-width:0;
background-color:#D5D0F4;
text-align:center;
Script im Head
<script type="text/javascript" language="JavaScript">
<!-- Begin
function ZeigeDatum()
{
var Jetzt = new Date();
var Tag=Jetzt.getDate();
var Monat = Jetzt.getMonat() + 1;
var Jahr = Jetzt.getFullYear().toString();
var box=document.forms[0].DateBox; //hier wird das datum dargestellt
if ( ( Monat /10 ) < 1 )
{
Monat=("0" + Monat).toString(); // führende 0
}
if ( (Tag/10)<1)
{
Tag=("0" + Jetzt.getDate()).toString(); // führende 0
}
box.value=Monat + "." + Tag + "." + Jahr;
}
function ZeigeZeit()
{
var box = document.forms[0].DateBox; //hier wird das datum dargestellt
var Zeit=new Date();
if (Zeit.getMinutes() / 10 <1 )
{
box.value=Zeit.getHours() + " : " + "0" + Zeit.getMinutes() + " Uhr";
}
else
{
box.value=Zeit.getHours() + " : " + Zeit.getMinutes() + " Uhr";
}
}
// End -->
</script>
im Body-Tag
<body onLoad="return ZeigeDatum()" ...
im Body
Datum / Zeit
<form name="Formular01">
<input type="text" readonly="readonly" name="DateBox" size="10">
</input>
</form>
<a
onmouseover="ZeigeZeit()"
onmouseout="ZeigeDatum()"
href="javascript:void(0)">
MouseOver für die Zeit
</a>
| 
WWW.WEB-TOOLBOX.NET
ZURÜCK