Analoge Uhr mit römischen Ziffern

Dieses Javascript fügt auf eurer Homepage eine analoge Uhr mit römischem Ziffernblatt ein. Dabei werden nur die Ziffern 3, 6, 9 und 12 als römische Ziffern dargestellt. Die restlichen Positionen werden in dem Javascript lediglich als Punkte angezeigt.

Die Farbe der Zeiger und des Ziffernblattes könnt ihr dabei verstellen. Die Farbcodes findet ihr bei unseren 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-mit-roemischen-ziffern/" 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 -->