Ahora inserta el cuadro de texarea en el lugar donde quieras:

 

 

 

Y por último coloca este campo que es el que te mostrará la suma de los carácteres escritos en el texarea:

 

 

 

 

<script language="JavaScript1.2">

//drag drop function for NS 4////
/////////////////////////////////

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for IE 4+////
/////////////////////////////////

var dragapproved=false

function drag_dropie(){
if (dragapproved==true){
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex
document.all.showimage.style.pixelTop=tempy+event.clientY-iey
return false
}
}

function initializedragie(){
iex=event.clientX
iey=event.clientY
tempx=showimage.style.pixelLeft
tempy=showimage.style.pixelTop
dragapproved=true
document.onmousemove=drag_dropie
}

if (document.all){
document.onmouseup=new Function("dragapproved=false")
}

////drag drop functions end here//////

function hidebox(){
if (document.all)
showimage.style.visibility="hidden"
else if (document.layers)
document.showimage.visibility="hide"
}

</script>

 

 

 

<div id="showimage" style="position:absolute;width:250px;left:10;top:70">

<table border="0" width="250" bgcolor="#FF0000" cellspacing="0" cellpadding="4">
<tr>
<td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
<tr>
<td onMousedown="initializedragie()" style="cursor:move" width="100%"><ilayer width="100%"><layer width="100%" onMouseover="dragswitch=1;drag_dropns(showimage)" onMouseout="dragswitch=0">
<center>
<font face="Verdana" color="#FFFFFF"><strong>AQUÍ PUEDES PONER UN TITULO</strong></font>
</center></layer></ilayer></td>

<td style="cursor:hand"><a href="#" onClick="hidebox();return false">
<img src="close.gif" border=0 width="16" height="16"></a></td>
</tr>

<tr>
<td width="100%" bgcolor="#CCCC33" style="padding:2px" colspan="2">
<!--Begin html content here. --------->
<div align="center"><font size="2">Aquí puedes poner lo que quieras.<br>Imágenes, enlaces , , ,<img src="boy4.gif" border="0"></font><p><strong>
  <font size="2"><br>Cualquier código html sirve para configurar el mensaje que tu quieras.</font></strong></div>

<!--End of html content. --------->
</td>
</tr>
</table>

 

 

 

 

<script language="JavaScript1.2">
var scroller_width=200
var scroller_height=120
var bgcolor='#E0EFD1'
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var scrollercontent=new Array()
//Define scroller contents. Extend or contract array as needed
scrollercontent[0]='Esto te puede servir para plasmar tus noticias , o tus novedades  yo que se lo que se te pueda ocurrir.'
scrollercontent[1]='Que no te a quedado claro , no me lo hagas repetir .'
scrollercontent[2]='Visita mi pagina <a href="creatupropiaweb
con'>http://www.creatupropiaweb.com">creatupropiaweb</a><br>con un click aqui <a href="http://www.creatupropiaweb.com"> venga</a>'

////NO need to edit beyond here/////////////

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=0 top=0>'+scrollercontent[0]+'</layer></ilayer>')
}

var curpos=scroller_height*(1)
var degree=10
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function moveslide(){
if (curpos>0){
curpos=Math.max(curpos-degree,0)
tempobj.style.top=curpos
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=scrollercontent[curindex]
nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(scrollercontent[curindex])
crossobj.document.close()
}
curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0
}

function resetit(what){
curpos=scroller_height*(1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=scrollercontent[curindex]
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (ie4||dom||document.layers)
window.onload=startit

</script>
</p>
</center>

 

 

En el <head>

 

<style>
<!--
.skin0 {
position:absolute;
text-align:left;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}
.skin1 {
cursor:default;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
visibility:hidden;
border:2px outset buttonhighlight;; font-style:normal; font-variant:normal; font-weight:normal
}
.menuitems {
padding-left:15px;
padding-right:10px;
}
-->
</style>

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Web Site:  http://www.dynamicdrive.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var menuskin = "skin1"; // skin0, or skin1
var display_url = 0; // Show URLs in status bar?
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if (display_url)
window.status = event.srcElement.url;
  }
}
function lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
  }
}
function jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
  }
}
//  End -->
</script>

 

 

 

<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class="menuitems" url="Vida'>http://www.vidauna.com">Vida Una</div>
<div class="menuitems" url="Otra'>http://www.vidauna.com">Otra vez a creatupropiaweb</div>
<hr>
<div class="menuitems" url="y'>http://www.vidauna.com">y otra a creatupropiaweb</div>
<div class="menuitems" url="pues'>http://www.vidauna.com">pues otra vez</div>
<hr>
<div class="menuitems" url="te'>http://www.vidauna.com">te lo imaginas</div>
<div class="menuitems" url="Para'>http://www.vidauna.com">Para que cambiar</div>
</div>
<script language="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>

 

Copia y pega el codigo en las paginas que quieras mostrar la velocidad  de apertura , fijate en el script y cambia TU IMAGEN , por la direccion correcta a una imagen que tengas en tu servidor.

 

 

 

<form name="velocidad"> <script>
function calcular(peso){
    fin = new Date();
    vel = (peso/1024)/((fin-inicio)/1000)+'';
    vel = vel.substring(0, 5);
    document.forms.velocidad.valor.value = vel;
}
inicio = new Date();
document.write('<img style="position:absolute; visibility:hidden" src="http://TU IMAGEN" onload="calcular(this.fileSize)">');
</script>Página bajada a <input type="text" size="3" name="valor" value="..."> kbps</form>

 

 

<html>
<head>
<title>Proforma de Com*****dora</title>
<script>
function relojFecha(){
 var mydate=new Date();var year=mydate.getYear();
 if (year < 1000)year+=1900;
 var day=mydate.getDay();
 var month=mydate.getMonth();
 var daym=mydate.getDate();
 if (daym<10)daym="0"+daym;
 var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado");
 var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto",
                                              "Septiembre","Octubre","Noviembre","Diciembre");
 var horas = mydate.getHours();
 horas = (horas<10)?"0"+horas:horas;
 var minutos = mydate.getMinutes();
 minutos = (minutos<10)?"0"+minutos:minutos;
 var segundos = mydate.getSeconds();
 segundos = (segundos<10)?"0"+segundos:segundos;
 document.getElementById("idReloj").innerHTML = "<"+"small><"+"font color='000000' face='Verdana'>"+
                                                 dayarray[day]+" "+daym+" de "+montharray[month]+" de "+
                                                       year+" "+horas+":"+minutos+":"+segundos+"<"+"/font><"+"/small>";
 setTimeout('relojFecha()',1000);
}
</script>
</head>
<body onload="relojFecha()">
<p id="idReloj"></p>
</body>
</html>

 

 

Téngase en cuenta que, a diferencia del anterior ejemplo, el reloj está orientado a usar setTimeout, que permite lanzar la función relojFecha cada segundo. Por ello, no se puede parar y se lanza usando el evento onload de body.

 

 

<html>
   <head>
   <script language="javascript">
   var intval=""
   function start_Int()
   {
           if(intval=="")
           {
                   intval=window.setInterval("start_clock()",1000);
           }
           else
           {
                   stop_Int();
           }
   }
  
   function stop_Int()
   {
           if(intval!="")
           {
                   window.clearInterval(intval);
                   intval="";
                   document.formu.tiempo.value="Tiempo detenido";
           }
   }
  
   function start_clock()
   {
           var d=new Date();
           var sw="am";
           var h=d.getHours();
           var m=d.getMinutes() + "";
           var s=d.getSeconds() + "";
           if(h>12)
           {
                   h-=12;
                   sw="pm";
           }
           if(m.length==1)
           {
                   m="0" + m;
           }
           if(s.length==1)
           {
                   s="0" + s;
           }
           document.formu.tiempo.value=h + ":" + m + ":" + s + " " + sw;
   }
   </script>
   </head>
  
   <body>
   <form id="formu" name="formu">
   <input type="text" name="tiempo" value="Tiempo parado">
   </form>
   <input type="button" value="Empezar" onclick="start_Int()">
   <input type="button" value="Parar" onclick="stop_Int()">
   <p>Este ejemplo actualiza el contenido del cuadro de texto cada segundo.
   Pulsa "Empezar" para iniciar la función setInterval. Pulsa "Parar" para detener el
   tiempo con la función clearInterval.</p>
   </body>
   </html>

 

 

Estudiese bien este ejemplo. La variable intval contiene un valor que setInterval genera, y con el que podremos detener el intervalo usándolo en la llamada a clearInterval. Especialmente interesante es la función start_clock, que formatea la hora para su visualización.

 

 

<html>
   <body>
   <script language="javascript">
   document.write("Resolución de pantalla: ");
   document.write(screen.width + "*" + screen.height);
   document.write("<br>");
   document.write("Area visible disponible: ");
   document.write(screen.availWidth + "*" + screen.availHeight);
   document.write("<br>");
   document.write("Resolución de color: ");
   document.write(screen.colorDepth);
   document.write(" bits<br>");
   </script>
   </body>
   </html>

 

 

<html>
   <head>
   <script language="javascript">
   function twoframes()    {
           document.all("frame1").src="frame_c.htm";
           document.all("frame2").src="frame_d.htm";
   }
   </script>
   </head>
  
   <body>
   <iframe src="frame_a.htm" name="frame1"></iframe>
   <iframe src="frame_b.htm" name="frame2"></iframe>
   <br>
   <form>
   <input type="button" onclick="twoframes()" value="Cambiar la URL de los dos iframes">
   </form>
   </body>
   </html>

 

 

Escríbanse las cuatro páginas de los frames que se especifican y probar. Es muy sencillo darse cuenta de que la función all nos permite acceder a los distintos elementos de la página, al igual que lo hemos hecho antes de otras formas.