Analoguhren mit Zeigern gibt es wie Sand am Meer. Hier ein neuer Versuch zur Darstellung einer Analoguhr. Eigentlich ist es ja eine Digital-Uhr, oder?
Klicke hier, um ein Beispiel zu sehen. Es öffnet sich ein kleines Fenster.
HTML-Einbindung <!-- Script-Anfang --> <!-- www-java24.net - DIE Javascript - Ressource --> <!-- Diesen Code musst Du in den -head- einbauen --> <script type="text/javascript"> //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // Analoguhr v1.0 //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //------------------------------ Copyright ------------------------------ // (c) 2002 xeam.de // Internet: http://www.xeam.de // e-mail: mail@xeam.de //----------------------------------------------------------------------- var radius_1=40; // Stundenzeiger in Pixel var radius_2=50; // Minutenzeiger in Pixel var radius_3=70; // Sekundenzeiger in Pixel var abstand_x=150; // zum linken Rand var abstand_y=150; // zum oberen Rand var datum; var a; var b; var c; function drehen () { if (window.document.getElementById) { datum=new Date (); a=(datum.getHours ()*(360/12))-90; b=(datum.getMinutes ()*(360/60))-90; c=(datum.getSeconds ()*(360/60))-90; window.document.getElementById ("stunden").innerHTML=datum.getHours (); window.document.getElementById ("minuten").innerHTML=datum.getMinutes (); window.document.getElementById ("sekunden").innerHTML=datum.getSeconds (); window.document.getElementById ("stunden").style.left=abstand_x+(radius_1*(Math.cos (a*(Math.PI/180)))); window.document.getElementById ("stunden").style.top=abstand_y+(radius_1*(Math.sin (a*(Math.PI/180)))); window.document.getElementById ("minuten").style.left=abstand_x+(radius_2*(Math.cos (b*(Math.PI/180)))); window.document.getElementById ("minuten").style.top=abstand_y+(radius_2*(Math.sin (b*(Math.PI/180)))); window.document.getElementById ("sekunden").style.left=abstand_x+(radius_3*(Math.cos (c*(Math.PI/180)))); window.document.getElementById ("sekunden").style.top=abstand_y+(radius_3*(Math.sin (c*(Math.PI/180)))); window.document.getElementById ("mitte").style.left=abstand_x; window.document.getElementById ("mitte").style.top=abstand_y; window.setTimeout ("drehen ()",1000); } } </script> <!-- Diesen Code musst Du als -eventhandler- in den body-Tag einbauen --> <body onload="drehen ();"> <!-- Diesen Code musst Du in den -body- einbauen --> <div id="mitte" style="font-family:verdana;font-size:10pt;position:absolute;left:-1000px;top:-1000px;"> • </div> <div id="stunden" style="font-family:verdana;font-size:10pt;color:#666633; font-weight: bold;position:absolute;left:-1000px;top:-1000px;"> </div> <div id="minuten" style="font-family:verdana;font-size:10pt;color:#0000FF; font-weight: bold;position:absolute;left:-1000px;top:-1000px;"> </div> <div id="sekunden" style="font-family:verdana;font-size:8pt;color:#FF0000; font-weight: bold;position:absolute;left:-1000px;top:-1000px;"> </div> <!-- Script-Ende --> <!-- www-java24.net - DIE Javascript - Ressource -->
Hier kannst Du Dir das Javascript einfach per eMail zusenden lassen.
Wenn Du den Newsletter beziehen möchtest, klicke bitte in das Feld "Abo"