Fundamental

Reloj analógico con desplazamiento por la pantalla

Código JavaScript que nos muestra un reloj con forma analógica (con sus agujas y sus 12 horas) en la parte derecha de la pantalla y se desplaza a la vez que nos movemos verticalmente por la pantalla.

 <script language="JavaScript"> //Static analog Clock by kurt.grigg@virgin.net 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>

Cuenta atrás para cerrar una ventana

Un buen truco JavaScript para cerrar una ventana pasado un tiempo que nosotros queramos.

 onLoad="begintimer()"  <script>  </script>

Averiguar día de nacimiento de una persona

Si quieres ofrecer a tus visitantes la posibilidad de poder consultar que día de la semana fue una determinada fecha este es el código javascript que necesitas.

 <SCRIPT LANGUAGE="JavaScript">   </script>  <form name=form> <center> <table border=2 cellspacing=0 cellpadding=0 bgcolor=white> <tr><td colspan=3 align=center bgcolor="#FFFFCC"> <p style="margin-top: 0; margin-bottom: 0"><font face="verdana, arial" size="-1"><b>¿En que día de las semana naciste?</b></font></p> <p style="margin-top: 0; margin-bottom: 0"><font face="verdana, arial" size="-1">Introduce tu fecha de nacimiento</font></p> </td></tr> <tr><td align=center bgcolor="#FFFFCC"> <select name="month" size="1"> <option selected>Mes <option value="January">Enero <option value="February">Febrero <option value="March">Marzo <option value="April">Abril <option value="May">Mayo <option value="June">Junio <option value="July">Julio <option value="August">Agosto <option value="September">Septiembre <option value="October">Octubre <option value="November">Noviembre <option value="December">Diciembre </select> </td> <td align=center bgcolor="#FFFFCC"> <select name="day" size="1"> <option selected>Día <option value="1">01 <option value="2">02 <option value="3">03 <option value="4">04 <option value="5">05 <option value="6">06 <option value="7">07 <option value="8">08 <option value="9">09 <option value="10">10 <option value="11">11 <option value="12">12 <option value="13">13 <option value="14">14 <option value="15">15 <option value="16">16 <option value="17">17 <option value="18">18 <option value="19">19 <option value="20">20 <option value="21">21 <option value="22">22 <option value="23">23 <option value="24">24 <option value="25">25 <option value="26">26 <option value="27">27 <option value="28">28 <option value="29">29 <option value="30">30 <option value="31">31 </select> </td> <td align=center bgcolor="#FFFFCC"> <input type=text name=year value="19" size=4 maxlength=4> </td></tr> </table><p> <input type=button value="Calcular" onClick="calculate()"> </center> </form> <p align="center"><center> <font face="arial, helvetica" size="-2">JavaScript adaptado por</font></center> <p align="center" style="margin-top: 0"><font face="arial, helvetica" size="-2"><a href="http://javascriptsource.com">...:: LosRecursosGratis.com ::..</a></font><p>

Coloreado de las scrollbar

Las scrollbar son las barras que permiten el desplazamiento cuando la pagina ocupa un espacio mayor al que ofrece la pantalla. Como puedes ver en este sitio web están coloreadas.

<html> <head> <title>Scrollbar coloreada</title> <STYLE TYPE="text/css"></STYLE> </head> <body> Codigo para colorear la scrollbar. </body> </html>

Agrega tu página a favoritos

Este código no debe faltar en ningún sitio web.

<html> <head> <title>Agregar a Favoritos</title> </head> <body> <a href="javascript:window.external.AddFavorite('http://www.uterra.com','Alojamientos y promoción Web'); ">Agregar a favoritos</a> Para modificar esta código consulta la demostración </body> </html>

Tu página de inicio.

Con este código tu página se convertirá en la pagina de inicio del navegador.

<html> <head> <title>Pagina de inicio</title> </head> <body> <a href="http://www.uterra.com#" class="chlnk" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.uterra.com');" style="cursor: hand">Página de inicio</a> Crea una Página de Inicio </body> </html>

Redireccionamiento.

Con este código podrás enviar a los visitantes de una pagina a otra sin que ellos tengan que pulsar nada.

<html> <head> <title>Pagina de redireccionamiento</title> <meta http-equiv="refresh" content="5;URL=http://www.uterra.com"> </head> <body> Esta es una página de redireccionamiento. </body> </html>

Multibuscador en tu web

Este código te permitirá realizar búsquedas desde tu Web en los principales motores de búsqueda.



NOTA!!

ALGUNAS RECOMENDACIONES PARA INCLUIR LOS CÓDIGOS Debes copiar el contenido de los cuadros de textos (CTRL + C) y luego pegarlo en tu editor de HTML ( CRTL + V). Normalmente si es un editor gráfico (tipo FrontPage o Nestcape composer) será muy sencillo; vas a Insertar código HTML y lo pegas allí; por defecto te lo pega entre las etiquetas <body> </body>; la mayoría de los que tenemos incluidos en nuestra página, y por norma general, van incluidos ahí, por lo que no deberás hacer más; pero hay partes de código, o a veces incluso todo el código (esta comentado en el mismo código, ya que aparece entre dos etiquetas distintas a <body> </body>) deberás insertarlo en donde el código te indique (normalmente entre las etiquetas <head> </head>). Para incluirlo allí, sólo debes cortar el código correspondiente a esta parte de las etiquetas <body> </body> y pegarlo en su sitio. Por último, y si se necesita, sustituye los parámetros de ejemplos por los tuyos (Links, fuentes...) y a funcionar. Te recomendamos que los pruebes primero en una página nueva, para que te familiarices con su funcionamiento, y posteriormente los adaptes a lo que busques y lo pegues en tu página.