Beispiel: 53, Externes Scripting Download Bsp53

 

<script language="JavaScript" type="text/JavaScript">
  var svgdoc;
  var stunden;
  var minuten;
  var sekunden;
  var interv;
 Die globalen Variablen: svgdoc beinhaltet das Objekt des SVG-Dokumentes, stunden, minuten und sekunden beinhalten die akutelle Uhrzeit und in interv ist das Interval, das die Uhr animiert, gespeichert.
  function init() {
    svgdoc = document.getElementById('svgob').getSVGDocument();
    var jetzt = new Date();
    stunden = jetzt.getHours();
    minuten = jetzt.getMinutes();
    sekunden = jetzt.getSeconds();
    interv = window.setInterval('updateUhr()',1000);
  }		 init() initialisiert alle globalen Variablen und startet das Interval, das im Abstand von 1 Sekunde die Funktion updateUhr() wiederholt aufruft.
  function updateUhr() {
    if (sekunden < 59 ) sekunden++;
    else {
      sekunden = 0;
      if (minuten < 59) minuten++;
      else {
        minuten = 0;
        if (stunden < 23) stunden++;
        else stunden =0;
      }
    }
    setSVGUhr();
    setTextUhr();
  }		 updateUhr() aktualisiert die in stunden, minuten und sekunden gespeicherte Uhrzeit und setzt die SVG-, sowie die Text-Uhr neu.
  function setTextUhr() {
    var tstunden = stunden;
    var tminuten = minuten;
    var tsekunden = sekunden;
    if (String(stunden).length == 1) tstunden = '0'+stunden;
    if (String(minuten).length == 1) tminuten = '0'+minuten;
    if (String(sekunden).length == 1) tsekunden = '0'+sekunden;
    document.getElementById('uhr2').firstChild.data = tstunden+':'+tminuten+':'+tsekunden;
  }		 setTextUhr() schreibt die textuelle Darstellung der Uhr unter der SVG-Uhr neu und zwar liest sie die aktuellen Werte aus den Variablen stunden, minuten und sekunden aus.
  function setSVGUhr() {
    var tstunden = stunden*30+minuten/2;
    svgdoc.getElementById('stundenzeiger').setAttribute('transform','rotate('+tstunden+')');
    svgdoc.getElementById('minutenzeiger').setAttribute('transform','rotate('+minuten*6+')');
    svgdoc.getElementById('sekundenzeiger').setAttribute('transform','rotate('+sekunden*6+')');
  }
</script>		 setSVGUhr() aktualisiert die SVG-Darstellung der Uhr, indem sie auf die Elemente 'stundenzeiger', 'minutenzeiger' und 'sekundenzeiger' des SVG-Dokuments zugreift und diese entsprechend der aktuellen Zeit rotiert.

< voriges Beispiel - nächtes Beispiel > Fenster schliessen