nikolausdulgeridis
Navigation
_________________
  JavaScript ClockExample
 

JavaScript - Uhr Beispiel

Einfaches Beispiel für eine Uhr und Datumsanzeige in JavaScript

"Lange" Datumsanzeige:
  1. zuerst wird in Html der Ausgabebereich definiert,
  2. dann die Ausgabefunktion:in JavaScript deklariert
  3. zum Schluss wird mit setInterval der Timer gestartet
<div id="clockfull1">clockfull1</div>
<script>
     function showTime1() { document.getElementById("clockfull1").innerHTML= new Date(); } 
    setInterval("showTime1()",1000); 
</script>

"Kurze" Datumsanzeige
Die oben verwendete "lange" Datumsanzeige ist die native Datumsausgabe in Javascript zzgl. Zeitzone. Das Format kann je nach Browser variieren und entspricht daher selten unseren Anforderungen (streng genommen gibt es dieses Format gar nicht sondern es ist die Stringausgabe eines Datumsobjekts, Stichwort Opearatorüberladung). Man könnte auf die Idee verfallen und den Text hinter GMT abschneiden. Der nächste Browser verwendet aber vielleicht UTC statt GMT, dann geht das schief. Stattdessen muss man etwas weiter ausholen und Jahr, Monat, Tag, Stunde, Minute über die Datumsfunktionen abfragen und eine Anzeige im gewünschten Format zusammensetzen. Den Code findet man im Beispiel unten.

Zeitgesteuertes Meldungsfeld
Mit setTimeout wird im folgenden Beispiel eine Melung nach 5 Sekunden wieder ausgeblendet
  1. zuerst wird in Html der Ausgabebereich definiert,
  2. dann wird die Ausgabefunktion ...
  3. und die Stopfunktion in JavaScript deklariert
  4. zum Schluss wird die Meldungsausgabe auufgerufen (der Timer startet automatisch)
Meldungen: <span id="meldungen">...Meldungen...</span><br>
<script>
 function melde(txt){document.getElementById("meldungen").innerHTML= txt; window.setTimeout("meldeAus()",15000);}
 function meldeAus(){document.getElementById("meldungen").innerHTML= "";}
 melde("Meldung verschwindet nach 15 Sekunden");
<script>

Alle Beispiele zusammengefasst

Meldungen: ...Meldungen...
Datum lang: clockfull
Zeit kurz: clockshort

Code

<div style="border:2px solid gray;padding:4px;margin:4px; width:666px; overflow: auto; ">
   Meldungen: <span id="meldungen">...Meldungen...</span><br>
   Datum lang: <span id="clockfull">clockfull</span><br>
   Zeit kurz: <span id="clockshort">clockshort</span><br>
</div>
 
<script>
setInterval("showTime()",1000);
melde("Meldung verschwindet nach 15 Sekunden");
 
 function showTime() {
 document.getElementById("clockfull").innerHTML=  new Date();
 document.getElementById("clockshort").innerHTML= timeString(new Date());
 }
 function timeString(zeit) {
  var h,m,s;
  h = zweiZiffern((zeit.getHours()));
  m = zweiZiffern((zeit.getMinutes()));
  s = zweiZiffern((zeit.getSeconds()));
  return woTag(zeit) +" "+h+":"+m+":"+s;
 }
 function zweiZiffern(z) {if((""+z).length == 1) return '0'+z; return ""+z;}
 function rundeMinuten(z,rminute) {var t=Date.parse(z); return new Date(Math.ceil(t/(rminute*60*1000))*(rminute*60*1000));}
 function rundeTag(z) {var t=z.getTime(); return t-(t%(24*60*60*1000))+(z.getTimezoneOffset()*60*1000);}
 function woTag(zeit) { var wtagname = new Array("So","Mo","Di","Mi","Do","Fr","Sa"); var wtag = zeit.getDay(); return wtagname[wtag];}
 function melde(txt){document.getElementById("meldungen").innerHTML= txt; window.setTimeout("meldeAus()",5000);}
 function meldeAus(){document.getElementById("meldungen").innerHTML= "";}
</script>

  
  11 Besucher