Klok met afbeelding

Klok met afbeelding

Een leuke en weer eens een andere dan anders klok :-) de klok scrollt mee naar beneden

Plaats onderstaande code tussen de <body> tags van je pagina

<script language="JavaScript"> ClockFace=new Image(); ClockFace.src="glass.gif"; milCol='#000000'; civCol='#ffffff'; dotCol='#cccccc';//dot colour. hCol='#0000ff';//hours colour. mCol='#0000ff';//minutes colour. sCol='#ff0000';//seconds colour. ampmCol='#ddeefe'; //Verander vanaf hier niets! ns=(document.layers); ns6=(document.getElementById&&!document.all); ie=(document.all); h=3; m=4; s=5; civ='1 2 3 4 5 6 7 8 9 10 11 12'; civ=civ.split(' '); mil='13 14 15 16 17 18 19 20 21 22 23 24'; mil=mil.split(' '); n=civ.length; ClockHeight=30; ClockWidth=30; f24="<font face='Arial' size=1 color="+milCol+">"; f12="<font face='Arial' size=1 color="+civCol+">"; e=360/n; HandHeight=ClockHeight/4; HandWidth=ClockWidth/4; y=0; x=0; if (!ns) document.write('<div id="glass" style="position:absolute"><img src='+ClockFace.src+' height=142 width=142></div>'); else document.write("<layer name='glass' top=0 left=0><img src='+ClockFace.src+' height=142 width=142></layer>"); if (!ns) document.write("<div id='disp' style='position:absolute;width:50px;height:20px;text-align:center'> </div>"); else document.write("<layer name=disp top=0 left=0></layer>"); for (i=0; i < n; i++){ if (!ns) document.write('<div id="Mil'+i+'" style="position:absolute;width:15px;height:15px;text-align:center;color:#0000dd">'+f24+mil[i]+'</font></div>'); else document.write('<layer name="Mil'+i+'" width=15 height=15><center>'+f24+mil[i]+'</font></center></layer>'); } for (i=0; i < n; i++){ if (!ns) document.write('<div id="Civ'+i+'" style="position:absolute;width:15px;height:15px;text-align:center;color:#0000dd">'+f12+civ[i]+'</font></div>'); else document.write('<layer name="Civ'+i+'" width=15 height=15><center>'+f12+civ[i]+'</font></center></layer>'); } for (i=0; i < n; i++){ if (!ns) document.write('<div id="D'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+dotCol+'"></div>'); else document.write('<layer name="D'+i+'" bgcolor='+dotCol+' width=2 height=2></layer>'); } for (i=0; i < h; i++){ if (!ns) document.write('<div id="H'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>'); else document.write('<layer name="H'+i+'" bgcolor='+hCol+' width=2 height=2></layer>'); } for (i=0; i < m; i++){ if (!ns) document.write('<div id="M'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>'); else document.write('<layer name="M'+i+'" bgcolor='+mCol+' width=2 height=2></layer>'); } for (i=0; i < s; i++){ if (!ns) document.write('<div id="S'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>'); else document.write('<layer name="S'+i+'" bgcolor='+sCol+' width=2 height=2></layer>'); } 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; ampm=(hr > 11)?"PM":"AM"; y=(ie)?document.body.scrollTop+window.document.body.clientHeight-ClockHeight*2.4:window.pageYOffset+window.innerHeight-ClockHeight*2.4; x=(ie)?document.body.scrollLeft+window.document.body.clientWidth-ClockWidth*2.4:window.pageXOffset+window.innerWidth-ClockWidth*2.9; Dspf=(ie)?glass.style:(ns6)?document.getElementById("glass").style:document.glass; Dspf.top=y-71; Dspf.left=x-70; Dsp=(ie)?disp.style:(ns6)?document.getElementById("disp").style:document.disp; Dsp.top=y-17; Dsp.left=x-24; for (i=0; i < s; i++){ CS=(ie)?document.all["S"+i].style:(ns6)?document.getElementById("S"+i).style:document.layers["S"+i]; CS.top=y+(i*HandHeight)*Math.sin(sec); CS.left=x+(i*HandWidth)*Math.cos(sec); } for (i=0; i < m; i++){ CM=(ie)?document.all["M"+i].style:(ns6)?document.getElementById("M"+i).style:document.layers["M"+i]; CM.top=y+(i*HandHeight)*Math.sin(min); CM.left=x+(i*HandWidth)*Math.cos(min); } for (i=0; i < h; i++){ CH=(ie)?document.all["H"+i].style:(ns6)?document.getElementById("H"+i).style:document.layers["H"+i]; CH.top=y+(i*HandHeight)*Math.sin(hrs); CH.left=x+(i*HandWidth)*Math.cos(hrs); } for (i=0; i < n; i++){ CD=(ie)?document.all["D"+i].style:(ns6)?document.getElementById("D"+i).style:document.layers["D"+i]; CD.top=y+ ClockHeight*Math.sin(-1.0471 + i*e*Math.PI/180); CD.left=x+ ClockWidth*Math.cos(-1.0471 + i*e*Math.PI/180); } for (i=0; i < n; i++){ CC=(ie)?document.all["Civ"+i].style:(ns6)?document.getElementById("Civ"+i).style:document.layers["Civ"+i]; CC.top=y-6 + ClockHeight*1.4*Math.sin(-1.0471 + i*e*Math.PI/180); CC.left=x-6 + ClockWidth*1.4*Math.cos(-1.0471 + i*e*Math.PI/180); } for (i=0; i < n; i++){ CM=(ie)?document.all["Mil"+i].style:(ns6)?document.getElementById("Mil"+i).style:document.layers["Mil"+i]; CM.top=y-6 + ClockHeight*1.9*Math.sin(-1.0471 + i*e*Math.PI/180); CM.left=x-6 + ClockWidth*1.9*Math.cos(-1.0471 + i*e*Math.PI/180); } setTimeout('ClockAndAssign()',100); if (ie)disp.innerHTML='<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>'; if (ns){ document.disp.document.open(); document.disp.document.write('<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>'); document.disp.document.close(); } } function aorp(){ if (ns6) document.getElementById("disp").innerHTML='<font face=Arial size=6 color='+ampmCol+'>'+ampm+'</font>'; setTimeout('aorp()',60000); } ClockAndAssign(); if (ns6)aorp(); //--> </script>

sla dit gifje op en plaats het in dezelfde map als je pagina