A cool clock, from HTML

Toggle sidebar Toggle sidebar
Paladin

Paladin

Senior member
Oct 22, 2001
660
33
91
This has been floating around the net, but I thought I would share it here. Copy and paste this into Notepad and save it as a .html file.

<!-- saved from url=(0022)http://internet.e-mail -->
<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2600.0" name=GENERATOR></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=0;x=0;Y=0;X=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy=0;Dx=0;DY=0;DX=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+'</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+'</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+'</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+'</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+'</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+'</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+'</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+'</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+'</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+'</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.style;
F.top=y + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x + 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.style;
HL.top=y+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes.style;
ML.top=y+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds.style;
SL.top=y+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate.style;
DL.top=Dy + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx + 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=Math.round(DY+=(Dy[i-1]-DY)*speed);
Dx=Math.round(DX+=(Dx[i-1]-DX)*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=Math.round(Y+=(y[i-1]-Y)*speed);
x=Math.round(X+=(x[i-1]-X)*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
</SCRIPT>



 
D

DocDoo

Golden Member
Oct 15, 2000
1,188
0
0
It may be a nice gesture...but pasting HTML code on this forum will cause the coding to get parsed in one way or another (this will render the script useless).
 
D

DocDoo

Golden Member
Oct 15, 2000
1,188
0
0
Ignore me... I am testing some PHP code to see if special tags are ok on this forum...

-- EDIT: Nevermind... none works :(
 
JetBlack69

JetBlack69

Diamond Member
Sep 16, 2001
4,580
1
0
(ns)?window.onMouseMove=Mouse:Document.onmousemove=Mouse;

this line causes trouble. the smile face should be a : d without the space, but that still doesn't work for me. :(


EDIT: I'm now getting an error in this chunk of code.

for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace.style;
F.top=y + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}

I think it has to do with the var F.
 
Paladin

Paladin

Senior member
Oct 22, 2001
660
33
91
yep, sorry guys. the html code got messed up by the forum software. a lot of the indexing vars [ i ] got nuked.
 
O

ObiDon

Diamond Member
May 8, 2000
3,435
0
0
Will it still work if you change the variable "i" to something else and then replace your original post with the new code?
 
S

stndn

Golden Member
Mar 10, 2001
1,886
0
0
how about uploading the code to a website or sth, where we can download and try them?
or if necessary, send me an email with the code and i'll post it on my website (email in my profile)
or tell us where you found it (unless if you are writing the code itself)
or well, fixing the code to post correctly on the forum (like changing [ i ] to [j] or sth) will do as well

thanks :)
-955-
 
JetBlack69

JetBlack69

Diamond Member
Sep 16, 2001
4,580
1
0
I got it to work, that's pretty sweet. All i did was copy the code from your quote. Then I removed all the "I"s and replaced them with "i"s. I also had to change this

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

(ns)?window.onMouseMove=Mouse: document.onmousemove=Mouse; without the space between the : and document.
 
S

stndn

Golden Member
Mar 10, 2001
1,886
0
0
<< I got it to work, that's pretty sweet. All i did was copy the code from your quote. >>
D'oh!

<< Then I removed all the "I"s and replaced them with "i"s. I also had to change this >>
thanks for the pointer ... got some problems over there as well :)

anyways, i have put them on my website
anyone knows if this is a public domain code, or if this needs to be credited to someone, etc?

thanks again for the cool stuff :D

-958-

edit: for some reason, when i try it on msie 5.5, it doesn't work??
it was working on netscape 4.78??
let's see what went wrong ....

edit2: it's working now ... thanks again for the pointer from JetBlack69 to edit line 169: Document.onmousemove to document.onmousemove :)
it's not working with mozilla though ... i have mozilla 095 if it makes any difference....
 
JetBlack69

JetBlack69

Diamond Member
Sep 16, 2001
4,580
1
0
Do you know what I noticed? The lines

HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5

they are near the top, they don't end with ";" but it still works. Anyone know why?:confused:
 
S

stndn

Golden Member
Mar 10, 2001
1,886
0
0
they work because in JavaScript, you don't have to end every line of commands with a semicolon
even if you stip out all the semicolons (well, the ones at the end of lines, that is), it will still work fine

:)
-959-
 
JetBlack69

JetBlack69

Diamond Member
Sep 16, 2001
4,580
1
0


<< they work because in JavaScript, you don't have to end every line of commands with a semicolon
even if you stip out all the semicolons (well, the ones at the end of lines, that is), it will still work fine

:)
-959- >>



Interesting. I guess that would save space.



<< thanks stndn and Jet. >>



No problem. :)
 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom