JavaScript - Timer

Moderator: Anatec

Benutzeravatar
Anatec
Moderator
Beiträge: 180
Registriert: Sonntag 23. Januar 2005, 20:32
Wohnort: Gera
Kontaktdaten:

JavaScript - Timer

Beitragvon Anatec » Freitag 15. August 2008, 18:24

An diesem praktischen Beispiel kann man sehr schön das Zusammenspiel zwischen JS und HTML erkennen.

Code: Alles auswählen

<html>
<head>

<script type="text/javascript">

var c = 0

function timeCount()
{
c = c+1;
document.getElementById('txt').value=c;
window.setTimeout("timeCount()", 5000);
}

</script>

</head>

<body>
<form>
<input type="button" value="Start count!" onclick="timeCount()"/>
<input type="text" id="txt"/>
</form>
</body>
</html>

Im Header steht eine JS Funktion "function timeCount()", welcher über den Button "Start count!" einmalig aufgerufen wird. Die Variable "C" ist zur Verdeutlichung eingesetzt. Sie zählt bei jedem Durchlauf um 1 hoch und schreibt ihren momentanen Wert in das HTML Textfeld mit der id="txt". Die JS Methode "window.setTimeout" stopt den Ablauf mit dem Parameter 5000ms und ruft dann die Funktion erneut auf. Da die Variable C beim laden der HTML Seite auf 0 gesetzt wird und beim Starten des Timers sofort auf 1 umspringt, kann man sehr schön erkennen, das die Funktion durchlaufen wird bis sie auf "setTimeout" trifft. In der Praxis kann man natürlich auch den Starbutton weglassen und die Funktion mit einem <body onload=........> starten.
Was kann man erkennen ?
1. Wie sieht ein einfacher HTML Aufruf einer JS Funktion aus
2. Wie greift JS auf einen HTML Tag zu, in dem man dem Tag zB. eine ID verpasst.
Wozu ist so ein Endlostimer gut ?
Um zB. sich immer wiederholende Abfragen zu realisieren.

Zum testen kann man sich den Code in irgend einen Texteditor laden und unter der Dateiendung "html" abspeicher. IE oder Firefox sind die Player, vorausgesetzt Java ist aktiviert.

Zurück zu „Programmiersprachen - gemischt (Codesammlung)“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast