Códigos javascript para el relojes y un sencillo calendario.

<html> <head> <title>Reloj con horas, minutos y segundos 24 Horas</title> <script language="JavaScript1.2"> function hora(){ if (!document.layers&&!document.all) return var Digital=new Date() var horas=Digital.getHours() var minutos=Digital.getMinutes() var segundos=Digital.getSeconds() var dn="" if (horas>24){ dn="" horas=horas-24 } if (horas==0) horas=24 if (minutos<=9) minutos="0"+minutos if (segundos<=9) segundos="0"+segundos mrelog=""+horas+":"+minutos+":" +segundos+" "+dn+"" if (document.layers){ document.layers.relog.document.write(mrelog) document.layers.relog.document.close() } else if (document.all) relog.innerHTML=mrelog setTimeout("hora()",1000) } </script> </head> <body onload="hora()"> <span id="relog" style="position: absolute"></span> </body> </html>

Ver demostración

CÓDIGO 0253

Otro reloj digital AM - PM.

Otro reloj con uso horario de 12 horas.

<html> <head> <title>Reloj de ciclo de 12 horas con horas, minutos y segundos</title> </head> <body onLoad="show5()"> <span id="liveclock" style="position:absolute;left:0;top:0;"> </span> <script language="JavaScript"> function show5(){ if (!document.layers&&!document.all&&!document.getElementById) return var Digital=new Date() var hours=Digital.getHours() var minutes=Digital.getMinutes() var seconds=Digital.getSeconds() var dn="AM" if (hours>12){ dn="PM" hours=hours-12 } if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds //change font size here to your desire myclock="<font size='2' face='Arial' ><b><font size='1'>www.uterra.com</font></br>"+hours+":"+minutes+":" +seconds+" "+dn+"</b></font>" if (document.layers){ document.layers.liveclock.document.write(myclock) document.layers.liveclock.document.close() } else if (document.all) liveclock.innerHTML=myclock else if (document.getElementById) document.getElementById("liveclock").innerHTML=myclock setTimeout("show5()",1000) } </script> </body> </html>

Ver demostración

CÓDIGO 0254

Reloj en un botón.

Reloj sobre un botón con horas, minutos y segundos.

<html> <head> <title>Reloj con segundero en horario de 12 horas sobre 1 botón</title> <STYLE type=text/css> .boton1 { BACKGROUND-COLOR: #828200; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 11px; FONT-WEIGHT: bold } </STYLE> </head> <body> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </body> </html>

Ver demostración

CÓDIGO 0255

Reloj analógico.

Reloj analógico permanentemente visible.

<html> <head> <title>Reloj analojico siempre visible</title> <script language="JavaScript"> fCol='000000';//face colour. sCol='ff0000';//seconds colour. mCol='000000';//minutes colour. hCol='000000';//hours colour. H='....'; H=H.split(''); M='.....'; M=M.split(''); S='......'; S=S.split(''); Ypos=0; Xpos=0; Ybase=8; Xbase=8; dots=12; ns=(document.layers)?1:0; if (ns){ dgts='1 2 3 4 5 6 7 8 9 10 11 12'; dgts=dgts.split(' ') for (i=0; i < dots; i++){ document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial,Verdana size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>'); } for (i=0; i < M.length; i++){ document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>'); } for (i=0; i < H.length; i++){ document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>'); } for (i=0; i < S.length; i++){ document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>'); } } else{ document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=1; i < dots+1; i++){ document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial,Verdana;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>'); } document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < M.length; i++){ document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>'); } document.write('</div></div>') document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < H.length; i++){ document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>'); } document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < S.length; i++){ document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>'); } document.write('</div></div>') } function clock(){ 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.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360; if (ns){ Ypos=window.pageYOffset+window.innerHeight-60; Xpos=window.pageXOffset+window.innerWidth-80; } else{ Ypos=document.body.scrollTop+window.document.body.clientHeight-60; Xpos=document.body.scrollLeft+window.document.body.clientWidth-60; } if (ns){ for (i=0; i < dots; ++i){ document.layers["nsDigits"+i].top=Ypos-5+40*Math.sin(-0.49+dots+i/1.9); document.layers["nsDigits"+i].left=Xpos-15+40*Math.cos(-0.49+dots+i/1.9); } for (i=0; i < S.length; i++){ document.layers["nx"+i].top=Ypos+i*Ybase*Math.sin(sec); document.layers["nx"+i].left=Xpos+i*Xbase*Math.cos(sec); } for (i=0; i < M.length; i++){ document.layers["ny"+i].top=Ypos+i*Ybase*Math.sin(min); document.layers["ny"+i].left=Xpos+i*Xbase*Math.cos(min); } for (i=0; i < H.length; i++){ document.layers["nz"+i].top=Ypos+i*Ybase*Math.sin(hrs); document.layers["nz"+i].left=Xpos+i*Xbase*Math.cos(hrs); } } else{ for (i=0; i < dots; ++i){ ieDigits[i].style.pixelTop=Ypos-15+40*Math.sin(-0.49+dots+i/1.9); ieDigits[i].style.pixelLeft=Xpos-14+40*Math.cos(-0.49+dots+i/1.9); } for (i=0; i < S.length; i++){ x[i].style.pixelTop =Ypos+i*Ybase*Math.sin(sec); x[i].style.pixelLeft=Xpos+i*Xbase*Math.cos(sec); } for (i=0; i < M.length; i++){ y[i].style.pixelTop =Ypos+i*Ybase*Math.sin(min); y[i].style.pixelLeft=Xpos+i*Xbase*Math.cos(min); } for (i=0; i < H.length; i++){ z[i].style.pixelTop =Ypos+i*Ybase*Math.sin(hrs); z[i].style.pixelLeft=Xpos+i*Xbase*Math.cos(hrs); } } setTimeout('clock()',50); } if (document.layers || document.all) window.onload=clock; //--> </script> </head> <body> www.uterra.com </body> </html>

Ver demostración

CÓDIGO 0256

Calendario del día de hoy.

Muestra en un cuadro el año, mes, día del mes y día de la semana.

<html> <head> <title>Calendario con el dia de hoy</title> </head> <body> <script languaje="JavaScript"> mesarray=new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio","Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"); diaarray=new Array( "Domingo","Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"); hoy = new Date(); dias = hoy.getDate(); dia = hoy.getDay(); mes = hoy.getMonth(); mes=mesarray[mes]; dia =diaarray[dia]; anno = hoy.getYear(); if (anno <200) anno = anno+1900; document.write('<TABLE WIDTH="60" height="60" BORDER="2" BGCOLOR="#FFFFFF"><TR><TD><CENTER>'); document.write('<FONT SIZE="2" COLOR="#000000"> <B>'+mes+'</B></FONT><br>'); document.write('<FONT SIZE="1" COLOR="#000000">'+anno+'</FONT><br>'); document.write('<FONT SIZE="4" COLOR="#000000" FACE="Arial"><B>'+dias+'</B></FONT><br>'); document.write('<FONT SIZE="1" COLOR="#000000">'+dia+'</FONT><br>'); document.write('</CENTER></TR></TD></TABLE>'); </script> </body> </html>

Ver demostración

Página anterior

Página siguiente