DevTrain

Autor: Andreas Rauch

Time is money - Date und setTimeout in JS

Sei es die Anzeige der Zeit oder ein Popup Fenster automatisch schliessen zu lassen...man  kommt kaum am Objekt time vorbei.  Daher sehen wir uns das mal genauer an.

Also: Wie bekommen wir eine Uhr auf unsere Seiten?

Zunächst einmal... wie bringen wir unsere Site dazu, immer die aktuelle Uhrzeit anzuzeigen. Das heißt, die Uhrzeit aktualisiert sich auf der Seite Sekunde für Sekunde ohne, daß sich die Seite neu laden geladen werden muß.

Wie gehts?


Folgendes Skript binden wir in unsere Site ein:

<script language="JavaScript1.2"> 
<!-- 
function f_zeit() 

  var zeit=new Date(); 
  var std=zeit.getHours(); 
  var min=zeit.getMinutes(); 
  var sek=zeit.getSeconds(); 
  var temp=" "+std; 
  temp+=((min<10)? ":0" : ": ")+min 
  temp+=((sek<10)? ":0" : ": ")+sek 
  document.clockform.digits.value=temp; 
  var id=setTimeout("f_zeit()",1000); 

//--> 
</script>

Wir erstellen also die Funktion  f_zeit() und definieren mehrere Variable für die Ausgabe der Zeit. Also Stunde, Minute und Sekunde.
Das Objekt Date liefert uns das genaue Datum und Uhrzeit bis auf Millisekunden genau. Aus diesem Date holen wir uns mit den Methoden getHours, getseconds, getminutes die aktuellen Werte raus und schreiben sie eine Variable, die ich Temp genannt habe. So das wärs eigentlich gewesen.. halt! Wir haben doch gesagt, daß wir die eine ständige Ausgabe der aktuellen Uhrezit haben wollen.

Wie geht das?

Mit der Funktion setTimeout("Funktion", Millisekunden) können wir eine bestimmte Funktion per Countdown ausführen lassen. Damit das aber nicht nur einmal passiert muss natürlich der setTimeout in der unserer Funktion mitausgeführt werden. Das Zeitlimit stellen wir auf 1000... also genau eine Sekunde.

Und schon sind wir fertig!

Man könnte natürlich noch viele Dinge mit dem setTimeout erledigen, wie etwa ein popup Fenster automatisch schließen lassen.

In etwa der Art:

var TickerTime = 6000;
  function schliessen() 
    {
     close("popup1.htm");     
    }


  Viel Spaß!


Erfasst am: 23.10.2001 - Artikel-URL: http://www.devtrain.de/news.aspx?artnr=641
© Copyright 2003 ppedv AG - http://www.ppedv.de