SprintDevelop.com - Diseño y desarrollo web - Diseño, desarrollo web,Aplicaciones Móviles, TabletasSprintDevelop.com - Diseño y desarrollo web
Mostrando Codigo - Javascript
Code

Javascript - Estela con forma de reloj analogico

Códigos Javascript

Divertido y util script con el cual conseguimos mostrar junto al cursor un reloj.
Visitas: 16,679 - 18/04/2003
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
EXPLICACION
Altamente configurable.
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1.  
  2. <SCRIPT language=JavaScript>
  3.  
  4. <!-- Este script no funciona en navegadores antiguos
  5. dCol='000000';//color de fecha
  6. fCol='000000';//color principal.
  7. sCol='000000';//Color de horras.
  8. mCol='000000';//Color de minutos.
  9. hCol='990000';//Color de segundos.
  10. ClockHeight=40;//Altura del reloj.
  11. ClockWidth=40;//anchura del reloj
  12. ClockFromMouseY=0;//Separacion del mouse
  13. ClockFromMouseX=100;//
  14.  
  15. //No modificar nada mas!
  16.  
  17. d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
  18. m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
  19. date=new Date();
  20. day=date.getDate();
  21. year=date.getYear();
  22. if (year < 2000) year=year+1900;
  23. TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
  24. D=TodaysDate.split('');
  25. H='...';
  26. H=H.split('');
  27. M='....';
  28. M=M.split('');
  29. S='.....';
  30. S=S.split('');
  31. Face='1 2 3 4 5 6 7 8 9 10 11 12';
  32. font='Arial';
  33. size=1;
  34. speed=0.6;
  35. ns=(document.layers);
  36. ie=(document.all);
  37. Face=Face.split(' ');
  38. n=Face.length;
  39. a=size*10;
  40. ymouse=0;
  41. xmouse=0;
  42. scrll=0;
  43. props="<font face="+font+" size="+size+" color="+fCol+"><B>";
  44. props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
  45. Split=360/n;
  46. Dsplit=360/D.length;
  47. HandHeight=ClockHeight/4.5
  48. HandWidth=ClockWidth/4.5
  49. HandY=-7;
  50. HandX=-2.5;
  51. scrll=0;
  52. step=0.06;
  53. currStep=0;
  54. y=new Array();x=new Array();Y=new Array();X=new Array();
  55. for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
  56. Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
  57. for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
  58. if (ns){
  59. for (i=0; i < D.length; i++)
  60. document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
  61. for (i=0; i < n; i++)
  62. document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
  63. for (i=0; i < S.length; i++)
  64. 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>');
  65. for (i=0; i < M.length; i++)
  66. 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>');
  67. for (i=0; i < H.length; i++)
  68. 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>');
  69. }
  70. if (ie){
  71. document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
  72. for (i=0; i < D.length; i++)
  73. 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>');
  74. document.write('</div></div>');
  75. document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
  76. for (i=0; i < n; i++)
  77. 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>');
  78. document.write('</div></div>');
  79. document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
  80. for (i=0; i < H.length; i++)
  81. 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>');
  82. document.write('</div></div>');
  83. document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
  84. for (i=0; i < M.length; i++)
  85. 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>');
  86. document.write('</div></div>')
  87. document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
  88. for (i=0; i < S.length; i++)
  89. 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>');
  90. document.write('</div></div>')
  91. }
  92. (ns)?window.captureEvents(Event.MOUSEMOVE):0;
  93. function Mouse(evnt){
  94. ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
  95. xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
  96. }
  97. (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
  98. function ClockAndAssign(){
  99. time = new Date ();
  100. secs = time.getSeconds();
  101. sec = -1.57 + Math.PI * secs/30;
  102. mins = time.getMinutes();
  103. min = -1.57 + Math.PI * mins/30;
  104. hr = time.getHours();
  105. hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
  106. if (ie){
  107. Od.style.top=window.document.body.scrollTop;
  108. Of.style.top=window.document.body.scrollTop;
  109. Oh.style.top=window.document.body.scrollTop;
  110. Om.style.top=window.document.body.scrollTop;
  111. Os.style.top=window.document.body.scrollTop;
  112. }
  113. for (i=0; i < n; i++){
  114.  var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
  115.  F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
  116.  F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
  117.  }
  118. for (i=0; i < H.length; i++){
  119.  var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
  120.  HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
  121.  HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
  122.  }
  123. for (i=0; i < M.length; i++){
  124.  var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
  125.  ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
  126.  ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
  127.  }
  128. for (i=0; i < S.length; i++){
  129.  var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
  130.  SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
  131.  SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
  132.  }
  133. for (i=0; i < D.length; i++){
  134.  var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
  135.  DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
  136.  DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
  137.  }
  138. currStep-=step;
  139. }
  140. function Delay(){
  141. scrll=(ns)?window.pageYOffset:0;
  142. Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
  143. Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
  144. for (i=1; i < D.length; i++){
  145. Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
  146. Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
  147. }
  148. y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
  149. x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
  150. for (i=1; i < n; i++){
  151. y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
  152. x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
  153. }
  154. ClockAndAssign();
  155. setTimeout('Delay()',20);
  156. }
  157. if (ns||ie)window.onload=Delay;
  158.  
  159. </SCRIPT>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Estela con forma de reloj analogico" href="http://www.tutores.org/codigo/405/" target="_blank">Estela con forma de reloj analogico</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Aun no existe ningun comentario para este Codigo.
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.