<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN >
<!-- saved from url (0033)http://www.solinas.com/clock.html -->
<HTML><HEAD>
<META http-equiv Content-Type content text/html; charset windows-1252 >
<META content MSHTML 5.50.4916.2300 name GENERATOR></HEAD>
<BODY bgcolor #FFFFFF >
<SCRIPT language JavaScript>
dCol '000000';//date colour.
fCol '000000';//face colour.
sCol '000000';//seconds colour.
mCol '000000';//minutes colour.
hCol '000000';//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 '...';
H H.split('');
M '....';
M M.split('');
S '.....';
S S.split('');
Face '1 2 3 4 5 6 7 8 9 10 11 12';
font 'Arial';
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>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><FONT color blue><p>Move your mouse around to enjoy this clock.</FONT><BR>About the clock - hundreds of people emailed me about the clock - either providing information or asking questions. If you sent me information thank you VERY much. If you sent a question I believe I've answered it below. I think I've covered everything.</p>
<p>-Mike</p>
<dl>
<dt>Where can I get the clock?</dt>
<dd>The original site is <a href here.http://javascript.internet.com/clocks/mouse-trail-clock.html >here</a>.</dd>
<dt>How can I put download the clock to my desktop?</dt>
<dd>For a clock with a plain white background just right click <a href clockwhite.html >here</a> save the file as to any directory you want. Remember where you put it! Right click on your desktop select properties and browse to the file you saved. Tell it Apply and OK (however many times) and you should be ready to go.
I've pre-made some with different background colors:
<a href clockwhite.html >white</a>
<a href clockdarkcyan.html ><font color DarkCyan>DarkCyan</font></a>
<a href clocklightseagreen.html ><font color LightSeaGreen>LightSeaGreen</font></a>
<a href clockcornflowerblue.html ><font color CornflowerBlue>CornflowerBlue</font></a>
<a href clockpink.html ><font color Pink>Pink</font></a>
<a href clockbisque3.html ><font color Bisque3>Bisque3</font></a> and
<a href clockindianred3.html ><font color IndianRed3>IndianRed3</font></a>.
I got the values for the colors from
I've made pages with several background colors. I picked ones I liked from <a href this'>http://www.ehkiwanis.org/links/colorpallet.htm >this page</a>.</dd>
<dt>Can I make my own colors?</dt>
<dd>Sure. Edit the BODY tag in the HTML.</dd>
<dt>Can I use the clock in emails?</dt>
<dd>You can but shouldn't. Some guys at work do it. It's cute at first but gets really annoying.</dd>
<dt>Seriously my friend sent me an email and it was in the background. How did he do it?</dt>
<dd>Ask your friend.</dd>
<dt>Oh PLEASE tell me!!!!</dt>
<dd>OK...OK... How to do it depends on your email program. Check the help files for HTML . There are 3 basic types of email - text rtf and html. Everything except text is evil. The clock needs html.</dd>
<dt>Who created the clock?</dt>
<dd>Amy Cook. Several other folks made modifications but I believe Amy did the original.</dd>
<dt>Does it only work when you are connected to the Internet?</dt>
<dd>No it works all the time. If you download the page to your computer you can use it for your background even after you close your network connection.</dd>
<dt>Thanks for making it available.</dt>
<dd>You're welcome.</dd>
</dl>
</BODY></HTML>