Analoge Uhr

Mit diesem Javascript bietet ihr den Besuchern eurer Homepage eine analoge Uhr mit Ziffernblatt an. Die angezeigte Uhrzeit richtet sich dabei nach der auf dem jeweiligen PC eingestellten Uhrzeit. Wenn ihr die Uhrzeit auf eurem Rechner ändert, dann wird sich die geänderte Uhrzeit auch auf das Javascript auswirken. Probiert es aus 🙂

Die Farbe der Zeiger und des Ziffernblattes könnt ihr dabei verstellen. Die Farbcodes findet ihr auf unserer Unterseite Farbcodes.

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- // Farbeinstellungen fCol='#000000';//Farbe Ziffernblatt sCol='Courier New';//Farbe Sekunden mCol='#FF0000';//Farbe Minuten hCol='#FF0000';//Farbe Stunden ClockHeight=50; ClockWidth=50; //Ab hier nichts mehr ändern! date=new Date(); day=date.getDate(); year=date.getYear(); if (year < 2000) year=year+1900; H='...'; H=H.split(''); M='....'; M=M.split(''); S='.....'; S=S.split(''); Face='1 2 3 4 5 6 7 8 9 10 11 12'; font='Arial'; size=1; speed=0.6; ie=(document.getElementById); Face=Face.split(' '); n=Face.length; a=size*10; ymouse=0; xmouse=0; scrll=0; props="<font face="+font+" size="+size+" color="+fCol+"><B>"; Split=360/n; HandHeight=ClockHeight/4.5 HandWidth=ClockWidth/4.5 HandY=-7; HandX=-2.5; scrll=0; step=0.06; currStep=0; y=new Array();x=new Array();Y=new Array();X=new Array(); for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0;} if (ie){ document.write('<div id="Of" style="position:relative;top:'+ClockHeight+'px;left:'+ClockWidth+'px;"><div style="position:relative">'); for (i=0; i < n; i++) document.write('<div id="ieFace'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>'); document.write('</div></div>'); document.write('<div id="Oh" style="position:relative;top:'+ClockHeight+'px;left:'+ClockWidth+'px;"><div style="position:relative">'); for (i=0; i < H.length; i++) document.write('<div id="ieHours'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>'); document.write('</div></div>'); document.write('<div id="Om" style="position:relative;top:'+ClockHeight+'px;left:'+ClockWidth+'px;"><div style="position:relative">'); for (i=0; i < M.length; i++) document.write('<div id="ieMinutes'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>'); document.write('</div></div>') document.write('<div id="Os" style="position:relative;top:'+ClockHeight+'px;left:'+ClockWidth+'px;"><div style="position:relative">'); for (i=0; i < S.length; i++) document.write('<div id="ieSeconds'+i+'" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>'); document.write('</div></div>') } function ClockAndAssign(){ time = new Date (); secs = time.getSeconds(); sec = -1.57 + Math.PI * secs/30; mins = time.getMinutes(); min = -1.57 + Math.PI * mins/30; hr = time.getHours(); hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360; for (i=0; i < n; i++){ var F=document.getElementById('ieFace'+i).style; F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll+"px"; F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180)+"px"; } for (i=0; i < H.length; i++){ var HL=document.getElementById('ieHours'+i).style; HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll+"px"; HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs)+"px"; } for (i=0; i < M.length; i++){ var ML=document.getElementById('ieMinutes'+i).style; ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll+"px"; ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min)+"px"; } for (i=0; i < S.length; i++){ var SL=document.getElementById('ieSeconds'+i).style; SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll+"px"; SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec)+"px"; } currStep-=step; } function Delay(){ scrll=0; for (i=1; i < n; i++){ y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed); x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed); } ClockAndAssign(); setTimeout('Delay()',20); } //--> </script> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/datum-und-uhrzeit/analoge-uhr/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript">function addEvent471(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false)}else if(obj.attachEvent){obj["e"+type+fn]=fn;obj[type+fn]=function(){obj["e"+type+fn](window.event)};obj.attachEvent("on"+type,obj[type+fn])}};addEvent471(window,'load',Delay);</script> <!-- präsentiert von kostenlose-javascripts.de -->