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.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlanaloguewatch.php.

This page has been viewed 453 times. It was last viewed on Tue 5 Nov, 2024 at 22:49