The JavaScript Source: Clocks: Mouse Trail Clock

@EGSUPERMEXDec 28.2002

I have a webpage on ‘GEOCITIES’. I would like to use the ‘MOUSE TRAIL CLOCK’ javascript at:

~~[url]~~http://javascript.internet.com/clocks/mouse-trail-clock.html[/url]

I have tried several ways to get it to work, without success. I followed the directions at:

~~[url]~~http://ncgoddess.com/script.html[/url]

to the letter ( To use in geocities

Click on the “Add-ons” button on the toolbar.
When the pop-up window appears, click on “Forms and Scripts” from the left-hand frame.
Click on the “HTML Code” icon.
A script dialog box will appear. Enter the JavaScript or HTML code here.
Click “OK.”

To modify a script element you previously added, either double-click on the element or click on the element and then click on the “Modify” button on the toolbar.)

I don’t know what I am doing wrong. Can someone help me out. I admit that I am new to all this, but I was able to get a drop down drawer to work. I don’t know why I can’t get this to work. Thank you!

to post a comment

JavaScript

7 Comments(s) _↴

@AdamBrillDec 29.2002 — #Try putting the attached file into the same directory as your HTML file. Then add this line into your Body:

<script language=javascript src=clock.js></script>

That should do it. Let me know if it still doesn't work. ?

[upl-file uuid=c41f8237-03ac-4ec9-a2e1-4f2edb6e157a size=2kB]clock.zip[/upl-file]

@sciguyryanAug 09.2003 — #hi,

here's an other script you might want to use it was written by Amy Cook ([mailto][email protected] [mailto]) and was posted onto: http://javascript.internet.com/clocks/mouse-trail-clock.html :

<HTML>

<HEAD>

<TITLE> special text colour changer </TITLE>

</HEAD>

<BODY>

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

</BODY>

</HTML>

@AdamBrillAug 09.2003 — #sciguyryan, are you sure that is "your" script? It looks a lot like this one: http://javascript.internet.com/clocks/mouse-trail-clock.html

If you wrote the original script, then it's fine, but since the original author is Amy Cook, I doubt that you did. And if you didn't, then why don't you at least leave the comments in at the top giving credit where credit is due?

@sciguyryanAug 10.2003 — #hi,

well, yes and no.

It was the one of http://javascript.internet.com/cloc...rail-clock.html but, i have made some modifications to the code.

@AdamBrillAug 10.2003 — #[i]Originally posted by sciguyryan [/i]

[B]well, yes and no.[/B][/QUOTE]I think I missed those "modifications" that you claim to have made. The only change I could find is that you took the comments out of it that gave credit to the original writer. What other changes did you make? or was that the "modification" that you where talking about?

That script was written by someone else and it is automatically copyright, so please don't take it and claim ownership. It is fine to take it and use it(since it was up for download), but leave all of the comments at the top and don't can't claim it as your own script. Even if you would have modified it, you still aren't the original writer so you can't claim it as your own script.

@sciguyryanAug 10.2003 — #hi,

i have changed the mail if you look it now has the writers name on it and, on my website i take all the authers comments out and display them on the page with the script in stead of in the actual script it's self and, that's why it is not there.

@akey25Oct 25.2009 — #Dear AdamBrill

I am new is this forum and nill in java script. I saw on a website mouse trail clock, it was very beautiful. I manage to got codes but I dont know where and how to put that codes to work that mouse trail clock. I went through lot of your answers and find you very helpfull and kind. Because these days no one got time for some one. Anyway now I got your codes which you gave to EGSUPERMEX (clock zip). Could you please explain me how to put these code in the site to work mouse trail clock.

Thanks in advance

Also in #JavaScript _↴

javascript form TypeScript dynamic override?Inputting Multi-line text boxes into an Array

Success!

Help @EGSUPERMEX spread the word by sharing this article on Twitter...

Tweet This

The JavaScript Source: Clocks: Mouse Trail Clock

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

The JavaScript Source: Clocks: Mouse Trail Clock

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴