Código de JavaScript - Reloj en el cursor

Reloj en el cursorgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(15)
Publicado el 25 de Febrero del 2003 por Amy Cook
16.345 visualizaciones desde el 25 de Febrero del 2003. Una media de 28 por semana
Código que muestra un reloj en el cursor del ratón.

Versión 1
estrellaestrellaestrellaestrellaestrella(15)

Publicado el 25 de Febrero del 2003gráfica de visualizaciones de la versión: Versión 1
16.346 visualizaciones desde el 25 de Febrero del 2003. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<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("DOMINGO","LUNES","MARTES","MIERCOLES","JUEVES","VIERNES","SABADO");
m=new Array("ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AUGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DECIEMBRE");
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='Verdana';
size=1;
speed=0.4;
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>



Comentarios sobre la versión: Versión 1 (15)

jose israel garcia lopez
27 de Febrero del 2003
estrellaestrellaestrellaestrellaestrella
Esta muy padre el efecto del reloc, lo recomiendo
Responder
miguel angel olveres
13 de Marzo del 2003
estrellaestrellaestrellaestrellaestrella
hola soy estudiante de la Universidad Tecnologica Emiliano Zapata
en Emiliano Zapata, Morelos, México.

acabo de correr el programa del reloj y me patrece genial, espero no les moleste que lo utilice para incluirlo en mi proximo trabajo que tengo que entregar de la materia "Programacion Orientada a la web.
gracias
Responder
Charmer
17 de Marzo del 2003
estrellaestrellaestrellaestrellaestrella
Esta buenisimo el codigo solo te falta ser mas organizado al estructurarlo ok Excelente

gracias
Responder
Alejandro
20 de Marzo del 2003
estrellaestrellaestrellaestrellaestrella
El script esta muy bueno pero debes tener en cuenta el como vaz a ordenar tu codigo.
Esto es un comentario Yo pienso y lo he comprobado de que si tu tienes muy bien organizado tu codigo la lectura de este va a ser mas rapido y seguro en la ejecucion de este yo recomiendo este script "felicidades"
Responder
Dario
27 de Marzo del 2003
estrellaestrellaestrellaestrellaestrella
Saludos, he visto agradable poner el javascript del reloj que sigue al cursor en una pagina web que estoy diseñando, pero sucede que al subirla a geocities no lo ejecuta, en cambio si ejecuta en el archivo guardado en mi pc.
¿Como puedo hacer para que se ejecute el reloj en el servidor de geocities?
Responder
hereje
26 de Mayo del 2003
estrellaestrellaestrellaestrellaestrella
Excelente codigo para agregar reloj, lo conoci en la web www.mundojavascript.com se puede configura. Excelente
Responder
naisui
08 de Agosto del 2003
estrellaestrellaestrellaestrellaestrella
Estupendo!!! Me ha abierto los ojos a una nueva dimensión ¡Guaau!
Responder
Julio
24 de Noviembre del 2003
estrellaestrellaestrellaestrellaestrella
Pegue el codigo en mi pagina y no funciona, me podrin decir si tiene que hir entre algun parametro en especial.
Gracias.
Responder
jose luis
29 de Noviembre del 2003
estrellaestrellaestrellaestrellaestrella
Muy bueno!!!!
es uno de los mejores que he visto
Responder
renzo
04 de Enero del 2004
estrellaestrellaestrellaestrellaestrella
Esta Buenazo si la ejecutas desde tu pc, pero no funciona en Geocities.
Alguien me puede decir por que?
Gracias.
Responder
ROFOMANUS
19 de Enero del 2004
estrellaestrellaestrellaestrellaestrella
enhorabuena! ktepeix de bueno!
Responder
ale
18 de Abril del 2004
estrellaestrellaestrellaestrellaestrella
"Estupendo"
Un código muy extenso y complicado pero el efecto logrado vale la pena.
Mis felicitaciones al autor.
Responder
._iBáÑeZ_. www.ibanez.ya.st
25 de Mayo del 2005
estrellaestrellaestrellaestrellaestrella
esta muy bien, pero.... no os habeis fijao k los minutos no los cuenta? cuenta horas y segundos, hay k modificar el script.
Responder
._iBáÑeZ_. www.ibanez.ya.st
25 de Mayo del 2005
estrellaestrellaestrellaestrellaestrella
SI K FUNCIONA!!, pido perdon x el post anterior,jejeje, es k a dado la casualidad de la aguja de segundos y minutos estaban 1 encima de la otra, de ahi mi error, pido disculpas.
Responder
Vismare
14 de Julio del 2005
estrellaestrellaestrellaestrellaestrella
El codigo esta muy bueno, me gusto mucho el javascript, cuando tengan otro parecido por favor comuniquenmelo. Sin mas Vismar
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s536