JavaScript code that displays a clock on a Web page with the mouse moving

javascript| Clock | mouse | web | display

<script language=javascript><!--
Dcol= ' 0000FF ';//date colour.
Fcol= ' 0000FF ';//face colour.
Scol= ' 0000FF ';//seconds colour.
Mcol= ' 0000FF ';//minutes colour.
Hcol= ' 0000FF ';//hours colour.
clockheight=40;
clockwidth=40;
clockfrommousey=0;
clockfrommousex=100;
Alter Nothing below! Alignments would 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 <) year=year+1900;
Todaysdate= "" +d[date.getday ()]+ "+day+" "+m[date.getmonth ()]+" "+year;
D=todaysdate.split (");
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 ';
' Arial ';
size=1;
speed=0.5;
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 ();D x=new Array ();D y=new Array ();D x=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 () ', 40);
}
if (ns| | IE) Window.onload=delay;
--></script>

Demo Effect:

<script language=javascript><!--dcol= ' 0000FF ';//date colour.fcol= ' 0000FF ';//face colour.scol= ' 0000FF ';// Seconds colour.mcol= ' 0000FF ';//minutes colour.hcol= ' 0000FF ';//hours colour. clockheight=40; clockwidth=40; clockfrommousey=0; Clockfrommousex=100;//alter Nothing below! Alignments would 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 ");d ate=new date ();d ay=date.getdate (); Year=date.getyear (); if (year <) year=year+1900; Todaysdate= "" +d[date.getday ()]+ "+day+" "+m[date.getmonth ()]+" "+year;d=todaysdate.split ("); H= ' ... '; H=h.split ("); M= ' ... '; M=m.split ("); S= ' ... '; S=s.split ("); Face= ' 1 2 3 4 5 6 7 8 9-a ' Arial '; size=1;speed=0.5;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+ ">&Lt B> ";p rops2=" <font face= "+font+" size= "+size+" color= "+dcol+" "><B>"; Split=360/n;dsplit=360/d.length; handheight=clockheight/4.5handwidth=clockwidth/4.5handy=-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 ();D x=new Array ();D y=new Array ();D x=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> ');d ocument.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> ');d ocument.write (' </div></div> ');d ocument.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> ');d ocument.write (' </div ></div> ');d ocument.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>");d ocument.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> ');d ocument.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.getho Urs (); 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);D x[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);D x[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)); for (*speed; i < n; i=1) { 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 () ', 40);} if (ns| | IE) window.onload=delay;//--></script>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]