Code: A user mouse follower analog clock

It is an analog clock on the page following the visitor's mouse all the time. It has the day of the week in it as well.

<!-- this script got from www.htmlcodefree.com, Krishna Eydat-->
<SCRIPT language=JavaScript> 

 

dCol='cc0099';//date colour.

 

fCol='ff99cc';//face colour.

 

sCol='cc99ff';//seconds colour.

 

mCol='008000';//minutes colour.

 

hCol='000080';//hours colour.

 

ClockHeight=40;

 

ClockWidth=40;

 

ClockFromMouseY=0;

 

ClockFromMouseX=100;

 

 

 

//Alter nothing below! Alignments will be lost!

 

 

 

d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");

 

m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");

 

date=new Date();

 

day=date.getDate();

 

year=date.getYear();

 

if (year < 2000) year=year+1900;

 

TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;

 

D=TodaysDate.split('');

 

H='ooo';

 

H=H.split('');

 

M='oooo';

 

M=M.split('');

 

S='.....';

 

S=S.split('');

 

Face='1 2 3 4 5 6 7 8 9 10 11 12';

 

font='tohoma';

 

size=1;

 

speed=0.6;

 

ns=(document.layers);

 

ie=(document.all);

 

Face=Face.split(' ');

 

n=Face.length;

 

a=size*10;

 

ymouse=0;

 

xmouse=0;

 

scrll=0;

 

props="<font face="+font+" size="+size+" color="+fCol+"><B>";

 

props2="<font face="+font+" size="+size+" color="+dCol+"><B>";

 

Split=360/n;

 

Dsplit=360/D.length;

 

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}

 

Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();

 

for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}

 

if (ns){

 

for (i=0; i < D.length; i++)

 

document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');

 

for (i=0; i < n; i++)

 

document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');

 

for (i=0; i < S.length; i++)

 

document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');

 

for (i=0; i < M.length; i++)

 

document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');

 

for (i=0; i < H.length; i++)

 

document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');

 

}

 

if (ie){

 

document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

 

for (i=0; i < D.length; i++)

 

document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');

 

document.write('</div></div>');

 

document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

 

for (i=0; i < n; i++)

 

document.write('<div id="ieFace" 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:absolute;top:0px;left:0px"><div style="position:relative">');

 

for (i=0; i < H.length; i++)

 

document.write('<div id="ieHours" 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:absolute;top:0px;left:0px"><div style="position:relative">');

 

for (i=0; i < M.length; i++)

 

document.write('<div id="ieMinutes" 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:absolute;top:0px;left:0px"><div style="position:relative">');

 

for (i=0; i < S.length; i++)

 

document.write('<div id="ieSeconds" 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>')

 

}

 

(ns)?window.captureEvents(Event.MOUSEMOVE):0;

 

function Mouse(evnt){

 

ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;

 

xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;

 

}

 

(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

 

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;

 

if (ie){

 

Od.style.top=window.document.body.scrollTop;

 

Of.style.top=window.document.body.scrollTop;

 

Oh.style.top=window.document.body.scrollTop;

 

Om.style.top=window.document.body.scrollTop;

 

Os.style.top=window.document.body.scrollTop;

 

}

 

for (i=0; i < n; i++){

 

 var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;

 

 F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;

 

 F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);

 

 }

 

for (i=0; i < H.length; i++){

 

 var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;

 

 HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;

 

 HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);

 

 }

 

for (i=0; i < M.length; i++){

 

 var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;

 

 ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;

 

 ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);

 

 }

 

for (i=0; i < S.length; i++){

 

 var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;

 

 SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;

 

 SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);

 

 }

 

for (i=0; i < D.length; i++){

 

 var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;

 

 DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;

 

 DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);

 

 }

 

currStep-=step;

 

}

 

function Delay(){

 

scrll=(ns)?window.pageYOffset:0;

 

Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);

 

Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);

 

for (i=1; i < D.length; i++){

 

Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);

 

Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);

 

}

 

y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

 

x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

 

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);

 

}

 

if (ns||ie)window.onload=Delay;

 

                      </SCRIPT>


<span style="font-family:tahoma;"><a target="_blank" href="http://www.htmlcodefree.com/"><span style="font-size: 8pt; text-decoration: none">Html Codes</span></a></span>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

counter

luke Posted on 21 June, 2013 - 02:54 AM 1

counter

HASHAM Posted on 30 April, 2013 - 03:33 PM 2

lo dasso

counter

kar7hi Posted on 14 August, 2012 - 04:19 PM 3

hey is nice and working only in internet explorer how to make it working in other browser too can anyone help me plz...

counter

Mudit Posted on 6 July, 2012 - 03:23 AM 4

hey when i place this code in my site than its dose not work and my site is on hpage so help me how can i use it..


	You can leave comments once you sign in/up.

Html Codes

Code: A user mouse follower analog clock

You can leave comments once you sign in/up.

Review

Links