RV's free DHTML and JavaScript effects

ANALOGUE CLOCK
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+
22-Feb-2006: First release.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var second_hand_colour="#c9f"; // colour of second hand var minute_hand_colour="#96c"; // colour of minute hand var hour_hand_colour="#639"; // colour of hour hand var facia_colour="#639"; // colour of facia (i.e. numbers) var face_colour="#ccc"; // colour of face (can be set to "transparent"); var xoffset=60; // horizontal distance from centre of clock to cursor var yoffset=60; // vertical distance from centre of clock to cursor var size=120; // pixels high/wide /**************************** * Analogue Clock Effect * * (c)2006 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var facia=String.fromCharCode(9660)+" 1 2 "+String.fromCharCode(9668)+" 4 5 "+String.fromCharCode(9650)+" 7 8 "+String.fromCharCode(9658)+" 10 11"; // characters to use for face, starting at '12' position var clok; var newx=xmo=400; var newy=ymo=300; window.onload=function() { if (document.getElementById) { var i, j, k; clok=document.createElement("div"); clok.style.position="absolute"; if (face_colour!="transparent") for (i=0; i<size; i++) { j=createDiv(false, face_colour); if (document.all) j.style.filter="Alpha(Opacity=50)"; else j.style.opacity=0.5; k=sizeMath.sqrt(i/size-Math.pow(i/size, 2)); j.style.left=size/2-k+"px"; j.style.top=i+"px"; j.style.height="1px"; j.style.width=k2+"px"; clok.appendChild(j); } for (i=1; i<size/4; i++) { j=createDiv("sec"+i, second_hand_colour); j.style.height="2px"; j.style.width="2px"; clok.appendChild(j); } for (i=1; i<size/4; i++) { j=createDiv("min"+i, minute_hand_colour); j.style.height="3px"; j.style.width="3px"; clok.appendChild(j); } for (i=0; i<size/6; i++) { j=createDiv("hour"+i, hour_hand_colour); j.style.height="4px"; j.style.width="4px"; if (!i) j.style.top=j.style.left=size/2-2+"px"; clok.appendChild(j); } facia=facia.split(" "); for (i=0; i<12; i++) { j=createDiv(false, "transparent"); j.style.color=facia_colour; j.style.font="bold 10pt monospace"; j.style.overflow="visible"; j.appendChild(document.createTextNode(facia[i])); j.style.top=size/2-7-size/2Math.cos(iMath.PI/6)+"px"; j.style.left=size/2-5+size/2Math.sin(iMath.PI/6)+"px"; clok.appendChild(j); } document.body.appendChild(clok); tick(); tock(); }} function tick() { var i, j; var now=new Date(); var sec=(now.getSeconds()+(now.getMilliseconds()%1000)/1000)Math.PI/30; for (i=1; i<size/4; i++) { j=document.getElementById("sec"+i).style; j.left=size/2+2iMath.sin(sec)-1+"px"; j.top=size/2-2iMath.cos(sec)-1+"px"; } xmo+=Math.floor((newx-xmo)/4); clok.style.left=xmo+"px"; ymo+=Math.floor((newy-ymo)/4); clok.style.top=ymo+"px"; setTimeout("tick()", 40); } function tock() { var i, j; var now=new Date(); var min=(now.getMinutes()+now.getSeconds()/60)Math.PI/30; var hrs=(now.getHours()+now.getMinutes()/60)Math.PI/6 for (i=1; i<size/4; i++) { j=document.getElementById("min"+i).style; j.left=size/2+2iMath.sin(min)-1.5+"px"; j.top=size/2-2iMath.cos(min)-1.5+"px"; } for (i=1; i<size/6; i++) { j=document.getElementById("hour"+i).style; j.left=size/2+2iMath.sin(hrs)-2+"px"; j.top=size/2-2iMath.cos(hrs)-2+"px"; } setTimeout("tock()", 999); } document.onmousemove=mouse; function mouse(e) { newy=yoffset-size/2+((e)?e.pageY:event.y+scro()); newx=xoffset-size/2+((e)?e.pageX:event.x); } function scro() { var scro=0; if (document.body.scrollTop) scro=document.body.scrollTop; else if (document.documentElement && document.documentElement.scrollTop) scro=document.documentElement.scrollTop; return (scro); } function createDiv(id, bg) { var div=document.createElement("div"); div.style.position="absolute"; div.style.overflow="hidden"; div.style.backgroundColor=bg; if (id) div.setAttribute("id", id); return (div); } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: If you want to change the size or colour of the hands, face and numbers of the clock, change the variables at the start of the script you just copied to the settings you require.
THAT'S IT When your page loads, the analogue clock should follow your mouse around, just like it does on this page.
No menu on the left? Click here for a full list of all the free DHTML and Javascript effects you could be using on your web-site!

Interested in learning more about JavaScript, CSS, HTML/XHTML/XML and PHP programming? I would highly recommend the following books...

[ This page viewed 6851 times. Last viewed Fri 16 May, 2008 at 19:46 ]