 Simpler Counter im Formular (Erklärung des Aufbaus)
Ein Übungbeispiel: Ein Formular, ein Textfeld drei Buttons und ein JavaScript mit 3 Funktionen die als START, STOP und RESET dienen sollen. Die Darstellung des Counters im Textfeld und die Verknüpfung der Buttons mit den Funktionen soll erklärt werden.
|
|
Anleitung und Übung: Simpler Counter im Formular anzeigen
Beispiel: Werteübergabe vom JavaScript an ein Formular
Das Formular
Zuerst schaffe ich ein Formular, das 4 Elemente hat:
(rechts inaktive Demo für das Formular)
- ein Textfeld
- einen Button Start
- einen Button Stop
- einen Button Reset
|
|
Im Textfeld soll später die Counterzeit angezeigt werden. Die 3 Buttons sollen mit 3 JavaScript-Funktionen verknüpft werden, die den Counter starten und stoppen und gegebenenfalls den Counter wieder auf Null setzen sollen.
<form name="CounterForm">
<input type="text" id="Anzeige" value="0">
<input type="button" value="Start">
<input type="button" value="Stop">
<input type="button" value="Reset">
</form>
Das Formular erhielt den Namen 'CounterForm'. Das Textfeld bekam eine ID mit dem Namen 'Anzeige'. Über diese ID will ich später das Textfeld ansprechen. Die Buttons sind nicht als 'reset' oder 'submit' sondern als Button vom Typ 'button' festgelegt worden.
Buttons verknüpfen
Mit den Buttons verknüpfe ich nun jeweils eine JavaScript-Funktion, die beim Anklicken aufgerufen werden soll (die Funktionen muss ich noch erstellen).
<form name="CounterForm">
<input type="text" id="Anzeige" value="0">
<input type="button" value="Start" onClick="CounterTimer()">
<input type="button" value="Stop" onClick="CounterStop()">
<input type="button" value="Reset" onClick="CounterReset()">
</form>
Die Funktionen
Die Funktion 'CounterTimer()' zählt im Abstand von 1000 Millisekunden (1 Sekunde) zur Variablen 'Sekunden' den Wert 1 hinzu. Der Wert dieser Variablen 'Sekunden' wird in das Element mit der ID 'Anzeige' geschrieben. Sie erinnern sich: Das Textfeld des Formulars bekam die ID mit dem Namen 'Anzeige'.
document.getElementById('Anzeige').value = Sekunden;
Bedeutet: In diesem Dokument ist der Wert (value) des Elements mit der ID 'Anzeige' das, was in der Variablen Sekunden steht.
Im Textfeld meines Formulars wird also jede Sekunde der neue Wert angezeigt. Solange der Counter läuft wird der Wert jede Sekunde um 1 erhöht. Das wird mit setTimeout( ,1000) erreicht.
1) CounterTimer()
var Sekunden = 0;
var t;
function CounterTimer()
{
document.getElementById('Anzeige').value = Sekunden;
Sekunden = Sekunden + 1;
t = setTimeout("CounterTimer()",1000);
}
2) CounterStop()
Die Funktion 'CounterStop()' stoppt den Timeout-Counter mit 'clearTimeout(t)'.
function CounterStop()
{
clearTimeout(t);
}
3) CounterReset()
Die Funktion 'CounterReset()' setzt die Werte im Formular wieder auf die Ausgangswerte zurück, genau so wie das ein Reset-Button tun würde.
function CounterReset()
{
clearTimeout(t);
document.CounterForm.reset()
Sekunden = 0;
}
Der Counter im Formular
Nun, wo die 3 Funktionen als JavaScript im Head-Bereich notiert wurden sollte der simple Counter mit seinen 3 Schaltmöglichkeiten funktionieren.
Schutzmechanismen und das Abfangen von unerlaubten Benutzeraktionen sind hier nicht vorgesehen.
|
|
... und ein wenig Kosmetik
Mit ein wenig CSS verleihe ich meinem Counter nun noch ein bisschen Format.
Für das Textfeld und die drei Buttons habe ich CSS-Formatierungen festgelegt.
Als randloses Textfeld mit Angaben für eine große Schrift, vor einer Hintergrundfarbe die mit der allgemeinen Hintergrundfarbe übereinstimmt, ist das Formularfeld nicht mehr als solches erkennbar.
Die Formularelemente stehen innerhalb einer Tabelle, für die ebenfalls CSS-Anweisungen festgelegt wurden.
|
|
CSS-Klassen der Formularfelder
<form name="CounterForm">
<input class="nummer" type="text" id="Anzeige" value="0">
<input class="butt" type="button" value="Start" onClick="CounterTimer()">
<input class="butt" type="button" value="Stop" onClick="CounterStop()">
<input class="butt" type="button" value="Reset" onClick="CounterReset()">
</form>
CSS-Notierungen im Head
<style type="text/css">
<!--
.nummer{
font-family:Verdana,sans-serif;
font-weight:bold;
font-size:120px;
color: #808080;
border:none;
text-align:center;
width:280px;
background:#F0F4FF;
}
.butt{
font-family:Verdana,sans-serif;
font-weight:bold;
font-size:12px;
color: #0090E0;
border:1px solid #FFFFFF;
text-align:center;
width:80px;
background:#F0F4FF;
}
.tabelle {
border:1px solid #0090E0;
height:250px;
width:300px;
background:#F0F4FF;
}
.tabelle td{
border:1px solid #0090E0;
margin:10px;
background:#F0F4FF;
}
-->
</style>
Das gesamte JavaScript im Head
<script type="text/javascript" language="JavaScript">
<!-- Begin
var Sekunden = 0;
var t;
function CounterTimer()
{
document.getElementById('Anzeige').value = Sekunden;
Sekunden = Sekunden + 1;
t = setTimeout("CounterTimer()",1000);
}
function CounterStop()
{
clearTimeout(t);
}
function CounterReset()
{
clearTimeout(t);
document.CounterForm.reset()
Sekunden = 0;
}
//-->
</script>
Aufwand
Wenn sie den Quellcode meines Beispiels anzeigen lasssen und kopieren, sollten sie in der Lage sein, den Counter in ihre HTML-Seite einzufügen.
- Script im Head-Bereich notieren
- CSS-Anweisungen im Head-Bereich notieren
- Tabelle und Formular im Body-Bereich notieren
Das war's schon!
Alles Notwendige ist getan! Sie können den Counter noch weiter anpassen oder bestimmte Aktionen beim Erreichen eines Sekundenwertes auslösen lassen.
Beispiele zu möglichen Erweiterungen
... werde ich demnächst veröffentlichen.
- Schutzmechanismen
- Aktionen auslösen
- automatisch starten
- automatischer Reset
- ...
| 
Home • Zeit • simpler Counter
Demo
