Objetos del Navegador JS

Objetos del Navegador
Hasta ahora hemos estudiado los objetos predefinidos del lenguaje, sin
embargo, no se ha hablado, apenas, acerca del control del navegador en sí
mismo y casi no se han mencionado los documentos web desde el punto de
vista de los objetos.
Los navegadores ofrecen al programador multitud de características en
forma de un modelo jerárquico. Esta jerarquía es lo que se llama modelo
de objetos del navegador y mediante ella se pueden controlar
características propias del navegador desde qué mensaje mostrar en la
barra de estado hasta la creación de nuevas páginas con el aspecto
deseado.
La jerarquía de dichos objetos toma la siguiente forma:
Para los más iniciados en la programación orientada a objetos, conviene
aclarar que en esta jerarquía, contra lo que pueda parecer, no existe
herencia alguna. Los objetos se relacionan por composición, es decir, un
objeto Window se compone (entre otras cosas) de un objeto Document, y
éste a su vez se compone de diversos objetos Form, Image, etc..
El padre de esta jerarquía es el objeto Window, que representa una
ventana de nuestro navegador. Dado que cada marco se considera una
ventana distinta, cada uno de ellos dispone de su propio objeto Window. El
objeto Document representa el documento HTML y cada uno de los objetos
que lo componen se corresponden con diversas etiquetas HTML.
El objeto Window
Es el objeto principal. Define la ventana sobre la que estamos trabajando e
incluye los objetos referentes a la barra de tareas, el documento o la
secuencia de direcciones de la última sesión.
Aún cuando el objeto se llame Window, disponemos siempre de una
referencia a él llamada window (recordad que Javascript distingue entre
mayúsculas y minúsculas). Será con esa referencia con la que trabajemos.
Este hecho será común a todos los objetos del modelo de objetos.
Por último, indicar que en Javascript, se supone que todas las propiedades

y métodos que llamamos sin utilizar ninguna referencia, en realidad se
hacen utilizando esa referencia window. Así, por ejemplo, cuando
ejecutamos el método alert() en realidad lo que estamos haciendo es
ejecutar el método window.alert().
 Veamos los métodos más usados del objeto Window.
[Variable=][window.]open(URL,
nombre, propiedades)
Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella
desde la ventana donde la creamos deberemos asignarle una variable, si no
simplemente invocamos el método: el navegador automáticamente sabrá
que pertenece al objeto window. El parámetro URL es una cadena que
contendrá la dirección de la ventana que estamos abriendo: si está en
blanco, la ventana se abrirá con una página en blanco. El nombre será el
que queramos que se utilize como parámetro de un TARGET y las
propiedades son una lista separada por comas de algunos de los siguientes
elementos:
 toolbar[=yes|no]
 location[=yes|no]
 directories[=yes|no]
 status[=yes|no]
 menubar[=yes|no]
 scrollbars[=yes|no]
 resizable[=yes|no]
 width=pixels
 height=pixels
Debemos tener cuidado con las propiedades que modifiquemos, es posible
que algunas combinaciones de los mismos no funcionen en todos los
navegadores. El Explorer 4, por ejemplo, da error ante la combinación
toolbar=no, directories=no, menubar=no. Veamos un ejemplo:
<SCRIPT LANGUAGE="JavaScript">
function AbrirVentana()
{
MiVentana=open("","Ventana","toolbar=no,menubar=no,status=yes");
MiVentana.document.write("<HEAD><TITLE>Título</TITLE></HEAD>");
MiVentana.document.write("<CENTER><H1><B>"+
"Esto puede ser lo que tu quieras"+
"</B></H1></CENTER>");
}
</SCRIPT>
<BODY>
...
<INPUT TYPE="button"
NAME="Boton1"
VALUE="Púlsame" onClick="AbrirVentana();">

...
</BODY>
Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro
navegador con JavaScript. Se llama a la función AbrirVentana desde el
evento onClick, como ya sabemos hacer desde el primer ejemplo. Esta
función crea la nueva ventana MiVentana y escribe en ella por medio del
objeto Document (que se estudiará más adelante) todo el código HTML de
la página.
close()
Cierra la ventana actual. A no ser que hayamos acabado de abrirla nosotros
mostrará al usuario una ventana de confirmación para que decida él si
quiere o no cerrarla. Esto se hace por motivos de seguridad, ya que sería
demasiado fácil hacer un script de esos mal intencionados que nos cerrase
la ventana del navegador.
alert(mensaje)
Muestra una ventana de diálogo con el mensaje especificado.
confirm(mensaje)
Muestra una ventana de diálogo con el mensaje especificado y dos botones.
Si el usuario pulsa OK, el método devuelve true. Si, en cambio, pulsa
Cancelar, devolverá false.
prompt(mensaje,valor_por_defecto)
Muestra una ventana de diálogo con el mensaje espec ificado y un campo de
texto en el que el usuario pueda teclear, cuyo valor inicial será igual a
valor_por_defecto. Si el usuario pulsa OK, el método devuelve la cadena
introducida en el campo de texto. Si, por el contrario, pulsa Cancelar,
devolverá el valor null. Dado que este valor se considera igual a false,
podemos comprabarlo directamente en una condición para ver qué ha
hecho el usuario.
Por ejemplo, el siguiente código muestra un saludo sólo si el usuario ha
pulsado el botón de Aceptar:
var
contestacion = prompt("¿Cómo te llamas, criatura?","");
if (contestacion)
alert("Hola, " + contestacion);
[identificador=]setTimeout("funcion",tiempo)
Llama a función cuando hayan pasado tiempo milisegundos. Imprescindible
a la hora de realizar cualquier rutina que deba ejecutarse a cierta

velocidad.
clearTimeout(identificador)
Detiene el proceso anterior.
scroll(x,y)
Desliza el documento contenido en la ventana hasta la posición especificada
por las coordenadas x e y que indican el grado de desplazamiento
horizontal y vertical en píxels, respectivamente. Ambos argumentos están
referidos a la esquina superior izquierda de la ventana actual.
 Ahora veamos las propiedades del objeto Window:
name
Sirve para averiguar o asignar el nombre de una ventana determinada.
closed
Propiedad booleana que indica si la ventana está o no cerrada.
length
Informa sobre la cantidad de ventanas hijas que contiene la ventana actual
(frames).
self
Devuelve una referencia a la propia ventana. Suele usarse para diferenciar
una ventana de un formulario si tienen el mismo nombre.
parent
Devuelve una referencia a la ventana que contiene a la ventana actual.
top
Devuelve una referencia a la ventana de orden superior del navegador, es
decir, a la que contiene todas las demás ventanas.
status
Define la cadena de caracteres que saldrá en la barra de estado en un
momento dado.
dafaultStatus

Define la cadena de caracteres que saldrá por defecto en la barra de
estado. Cuando no la especificamos, defaultStatus será igual al último valor
que tomó status.
frames[]
Uno de los problemas más frecuentes a los que se enfrenta un
programador de Javascript es el manejo de marcos. Es decir, ¿cómo accedo
yo al código o a objetos como Window o Document de otros marcos? JS
propone una manera bastante sencilla de hacerlo.
JS considera el documento de declaración de marcos (es decir, aquel en el
que escribimos las etiquetas FRAME y FRAMESET) como un objeto Window
normal y corriente. Permite acceder a los marcos que hemos declarado en
él por medio del vector frames. Es decir, si en nuestro documento estuviera
la siguiente línea:
<FRAME NAME="principal"
SRC="MiPagina.html">
Podríamos acceder a su objeto Window por medio de la referencia
window.frames["principal"].
A su vez, desde el documento "hijo", es decir, desde el documento que está
encerrado en un marco, podemos acceder al padre por medio de la
referencia parent. También podemos acceder al documento que esté arriba
del todo en esta jerarquía por medio de top. Por ejemplo:
window
== window.top
Esta igualdad comprobará si nuestro documento está en la ventana
principal o en un marco. Comprueba si la ventana en la que está (window)
es igual a la ventana principal (window.top). Mediante esta sencilla
comprobación podemos crear fácilmente (toda vez que c onozcamos el
manejo del objeto Location), rutinas que aseguren que nuestra ventana es
la principal, o que recarguen nuestra estructura de marcos si algún usuario
pretende acceder a un marco específico, etc..
Ejemplos:
Ahora veremos cómo se puede definir el valor de la barra de estado cuando
el ratón pasa por encima de un elemento <A>:
<A HREF="MiPagina.html"
onMouseOver="window.status='Vente a mi página';return true">
¿Fácil, no? Bueno, ahora vamos a ver cómo se hacen scrolls.
var texto="

Aquí está el mensaje que espero "
+ "observes y leas
con suma atención ";
var longitud=texto.length;
function scroll()
{
texto=texto.substring(1,longitud-1)+texto.charAt(0);
window.status
= texto;
setTimeout("scroll()",150);
}
</SCRIPT>
Como podéis ver, la cosa no es ni más larga ni más compleja que los
ejemplos anteriores. Simplemente escribe el texto en la barra de estado y
luego coge el caracter más a la izquierda del mismo y lo pone a la derecha,
para después volver a escribirlo. La única pega que tiene es cómo hacemos
para que la función se llame cada cierto tiempo predeterminado para ir
desplazando el texto a una velocidad constante. Y la respuesta está en el
método setTimeout.
El objeto Navigator
Este objeto permite obtener diversas informaciones sobre el navegador
donde se está ejecutando el código JS. Se suele usar para averiguar el
nombre y la versión del navegador que ejecuta nuestro código, de forma
que se puedan tomar decisiones sobre qué tipo de código ejecutar o qué
tipo de páginas mostrar.
 Algunas de sus propiedades, de sólo lectura, son:
appName
Cadena que contiene el nombre del cliente.
appVersion
Cadena que contiene información sobre la versión del cliente.
cpuClass
Informa sobre el tipo de procesador sobre el que se está ejecutando el
sistema operativo.
 Y el método con el que cuenta es:
javaEnabled()

Averigua si el navegador está configurado para soportar el uso de
programas escritos en Java, como los Applets.
Ejemplo:
function Navegador()
{
alert(navigator.appName);
alert(navigator.appVersion);
alert(navigator.cpuClass);
if
(navigator.javaEnabled())
alert("SÍ está preparado para
soportar Applets de Java");
else
alert("NO está preparado
para soportar Applets de Java");
}
</SCRIPT>
El objeto Screen
Como cabía esperarse, se puede acceder a este objeto por medio de la
referencia screen. Nos permitirá conocer la configuración de la pantalla del
usuario. Al igual que en el anterior objeto, todos sus atributos son de sólo
lectura. Conviene indicar que este objeto sólo está disponible desde las
versiones 4.0 de los navegadores.
 Propiedades.
height
Averigua la altura en píxels de la pantalla.
width
Averigua la anchura en píxels de la pantalla.
colorDepth
Indica el número de bits utilizados para proporcionar el color en la pantalla
del sistema donde se ejecuta el navegador. Por ejemplo, si vale 4 es que se
permite la visualización de 16 colores al mismo tiempo (24).

Así, por ejemplo, puedes comprobar la configuración de tu pantalla con el
siguiente código:
Ejemplo:
function
Pantalla()
{
var texto=screen.width + "x"
+ screen.height
+ "x"
+ Math.pow(2,screen.colorDepth) + " colores.";
alert(texto);
}
El objeto Document
Este objeto representa el propio doc umento HTML que se está mostrando
en la ventana del navegador. Se accede a él por medio de la referencia
document (aunque también sería válido window.document). Su mayor
importancia viene por el número de vectores que posee, que referencian a
objetos Image, Form o Link, los cuales permiten acceder a las imágenes,
formularios y enlaces del documento, respectivamente.
 Algunas propiedades de este objeto son:
lastModified
Contiene la fecha y hora en que se modificó el documento por última vez y
se suele usar en conjunción con write para añadir al final del documento
estas características.
bgColor
Especifica el color de fondo del documento. El color deberá estar en el
formato usado en HTML. Es decir, puede ser "red" o "#FF0000", por
ejemplo.
fgColor
Especifica el color de para el texto del documento.
linkColor, aLinkColor, vLinkColor
Especifican el color de los hiperenlaces del documento: iniciales, activos o

ya visitados.
title
Especifica el título del documento.
Ejemplo:
<script language="Javascript">
function
PruebasDocumento()
{
alert(document.title);
alert(document.lastModified);
}
 Matrices del objeto Document.
forms[]
Vector que contiene los formularios del documento. El primero será el
número 0, el segundo el 1, etc.. Se estudiará más detenidamente en el
siguiente capítulo.
images[]
Vector que contiene las imágenes del documento. Se ordenan igual que en
el anterior caso, aunque también permiten ser accedidas con el nombre
como índice. Es decir, a una imagen definida como <IMG SRC=".."
NAME="miImagen"> se puede acceder con document.images["miImagen"].
links[]
Vector que contiene los enlaces del documento. Se ordenan igual que en
los dos anteriores, aunque no se suele utilizar en el código Javascript. Su
razón de ser es que, al ser los enlaces objetos, permiten incluir código
Javascript en ellos por medio de la pseudo-URL "javascript:codigo".
 Métodos del objeto Document.
open()
Abre un nuevo documento para escribir. Un documento debe estar abierto
para poder escribir en él.
close()
Cierra el documento, impidiendo escribir de nuevo en él.

write(cadena)
Escribe el código HTML indicado en cadena en nuestro documento HTML.
A la hora de escribir en un documento por medio de write hay que tener en
cuenta un hecho fundamental. Para poder escribir en un documento, éste
debe estar abierto y, al abrirlo, se destruye todo el código que haya en él.
Un documento se abre automáticamente cuando empieza a cargarse y se
cierra cuando termina de hacerlo. Así pues, si deseamos escribir en un
documento sin sobreescribir su contenido, deberemos hacerlo antes de que
éste termine de cargar. Si lo hacemos después, sobreescribiremos su
contenido. Por lo tanto:
//escribir.html
<HTML>
<HEAD>
<TITLE>Escribe
y no sobreescribe</TITLE>
</HEAD>
<BODY>
Este es un
documento que fue modificado por última vez el día
<SCRIPT
LANGUAGE="JavaScript">document.write(document.lastModified);
</SCRIPT>
</BODY>
</HTML>
Este ejemplo os mostrará la cadena completa, ya que se llama a write
antes de cerrarse el documento. Es decir, antes de que termine de cargar.
Sin embargo, el siguiente ejemplo:
//sobreescribir.html
<HTML>
<HEAD>
<TITLE>Sobreescribe</TITLE>
<SCRIPT
LANGUAGE="JavaScript">
function escribir()
{
document.write("Este
es un documento "+
"que fue modificado por última vez el
día");
document.write(document.lastModified);
}
</SCRIPT>
</HEAD>
<BODY

onLoad="escribir()">
Hola.
</BODY>
</HTML>
Sobreescribirá el documento y no podremos ver ese "Hola", al ser llamado
después de cargar el documento, es decir, después de cerrarlo.
El objeto History
Se accede a este objeto por medio de la referencia window.history y
contiene todas las direcciones que se han visitado en la sesión actual.
Aunque no permite acceder a ellas, dispone de varios métodos para
sustituir el documento actual por alguno que el usuario ya haya visitado:
back()
Volver a la página anterior. Es muy sencillo de utilizar, sólo tienes que
pulsar aquí, cuya etiqueta se ha declarado como:
<A HREF="javascript:window.history.back()">
forward()
Ir a la página siguiente.
go(donde)
Ir a donde se indique, siendo donde un número tal que go(1) significa lo
mismo que forward() y go(-1) es equivalente a back().
El objeto Location
Se accede a este objeto por medio de la referencia window.location y
contiene información sobre la dirección de la página actual en varias
propiedades.
href
Permite el acceso a la dirección de la página actual. Si lo cambiamos
cambiaremos de página.
protocol
Protocolo de la página actual. Habitualmente http.

host
Máquina donde se alberga la página actual.
pathname
Camino de la página actual.
hash
Si hemos accedido a una página por medio de un ancla, contiene una
almohadilla seguida de ese ancla.
Ejemplo:
function
Localizacion()
{
alert("URL: "+window.location.href);
}
</script>

Formularios
En el capítulo anterior veíamos que uno de los objetos descendientes del
objeto document era el objeto Form. En este capítulo, pues, vamos a estudiar
con detenimiento este objeto y todos sus componentes.
El objeto Form es el contenedor de todos los elementos del formulario. La
siguiente figura muestra los objetos que puede contener un objeto Form:
Como ya vimos al tratar el objeto document, los formularios se agrupan en un
array dentro de document. Cada elemento de este array es un objeto de tipo
form.
 Las propiedades con las que cuenta son:
action
Es una cadena que contiene la URL del parámetro ACTION del
formulario, es decir, la dirección en la que los datos del
formulario serán procesados.
elements
Es un array que contiene todos los elementos del formulario, en
el mismo orden en el que se definen en el documento HTML. Por
ejemplo, si en el formulario hemos puesto, en este orden, una
caja de texto, un checkbox y una lista de selección, la caja de
texto será elements[0], el checkbox será elements[1] y la lista de
selección será elements[2].
method
Es una cadena que tiene el nombre del método con el que se va a
recibir/procesar la información del formulario (GET/POST).
 Y los métodos del objeto Form son:
reset()
Resetea el formulario: tiene el mismo efecto que si pulsáramos un
botón de tipo RESET dispuesto en el formulario.
submit()
Envía el formulario: tiene el mismo efecto que si pulsáramos un
botón de tipo SUBMIT dispuesto en el formulario.
Vistas ahora las propiedades y métodos del objeto Form, pasamos a estudiar,
uno por uno, todos los objetos contenidos en el formulario.

El objeto checkbox
Las "checkboxes" nos permiten seleccionar varias opciones marcando el
cuadrito que aparece a su izquierda. El cuadrito pulsado equivale a un "sí" y
sin pulsar a un "no" o, lo que es lo mismo, a "true" o "false".
 Propiedades
checked
Valor booleano que nos dice si el checkbox está pulsado o
no.
defaultChecked
Valor booleano que nos dice si el checkbox debe estar
seleccionado por defecto o no
name Es una cadena que contiene el valor del parámetro NAME.
value Es una cadena que contiene el valor del parámetro VALUE.
 Métodos
click() Realiza la acción de pulsado del botón
<HTML>
<HEAD>
<title>Ejemplo de CheckBox</title>
</HEAD>
<script LANGUAGE="JavaScript">

</script>
<BODY>
<form name="formulario" id="formulario">
<input type="checkbox" name="check1" checked>Opcion 1<br>
<input type="checkbox" name="check2">Opcion 2<br>

<input type="checkbox" name="check3" checked>Opcion 3<br>
</form>
<A href="javascript:Mostrar()">Ver valores</A>
</BODY>
</HTML>
Probar
El objeto select
Este objeto representa una lista de opciones dentro de un formulario. Puede
tratarse de una lista desplegable de la que podremos escoger alguna (o
algunas) de sus opciones.
 Propiedades
length Valor numérico que nos indica cuántas opciones tiene la lista.
options
Se trata de un array que contiene cada una de las opciones de la
lista. Este array tiene, a su vez, las siguientes propiedades:
 defaultSelected. Valor booleano que nos indica si la opción
está seleccionada por defecto.
 index. Valor numérico que nos da la posición de la opción
dentro de la lista.
 length. Valor numérico que nos dice cuántas opciones tiene
la lista.
 selected. Valor booleano que nos dice si la opción está
actualmente seleccionada o no.
 text. Cadena con el texto mostrado en la lista de una opción
concreta.
 value. Es una cadena que contiene el valor del parámetro
VALUE de la opción concreta de la lista.
 selectedIndex. Valor numérico que nos dice cuál de todas
las opciones disponibles está actualmente seleccionada.
<HTML>
<HEAD>
<title>Ejemplo de Select y Options</title>
</HEAD>
<!--
function Mostrar()

{
msg="Elementos:"+formulario.edad.length+"n";
msg+="Edad: "+
formulario.edad.options[formulario.edad.selectedIndex].value+
"n";
alert(msg);
}
//-->
</script>
<BODY>
Edad:<br><select name="edad">
<option value="<18" SELECTED>Menor de 18 años</option>
<option value=">18 y <60">Entre 18 y 60 años</option>
<option value=">60">Mayor de 60 años</option>
</select> </form>
</BODY>
</HTML>
Probar
El objeto radio
Al contrario que con los checkbox, que nos permiten elegir varias
posibilidades entre las dadas, los objetos radio sólo nos permiten elegir una
de entre todas las que hay. Están pensados para posibilidades mútuamente
excluyentes (no se puede ser a la vez mayor de 18 años y menor de 18 años,
no se puede estar a la vez soltero y casado, etc.).
 Propiedades
checked
Valor booleano que nos dice si el radio está seleccionado o
no.
defaultChecked
Valor booleano que nos dice si el radio debe estar
seleccionado por defecto o no.

length
Valor numérico que nos dice el número de opciones dentro
de un grupo de elementos radio.
Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben
tener el mismo valor en NAME.
 Métodos
click() Realiza la acción de pulsado del botón.
<HTML>
<HEAD>
<title>Ejemplo de Radio</title>
</HEAD>

</script>
<BODY>
Edad:<br>
<input type="radio" name="edad" value="<18">
Menor de 18 años.<br>
<input type="radio" name="edad" value=">18 y <60" checked>
Entre 18 y 60 años.<br>
<input type="radio" name="edad" value=">60">

Mayor de 60 años.<br>
</form>
</BODY>
</HTML>
Probar
El objeto button
Tenemos tres tipos de botones: un botón genérico, 'button', que no tiene
acción asignada, y dos botones específicos, 'submit' y 'reset'. Estos dos
últimos sí que tienen una acción asignada al ser pulsados: el primero envía el
formulario y el segundo limpia los valores del formulario.
 Propiedades
 Métodos
click() Realiza la acción de pulsado del botón
<HTML><HEAD>
<title>Ejemplo de Button</title>
</HEAD>

</script>
<BODY>
Un boton:
<input type="button" name="Boton1" value="El boton 1"
OnClick="Mostrar(this);"><br><br>
Un boton:
OnClick="Mostrar(this);"><br><br>
Un boton:
OnClick="Mostrar(this);"><br>
</form>
</BODY>
</HTML>
Probar
Los objetos text, textarea y password
Estos objetos representan los campos de texto dentro de un formulario.
Además, el objeto password es exactamente igual que el text salvo en que no
muestra los caracteres introducidos por el usuario, poniendo asteriscos (*) en
su lugar.
 Propiedades
dafaultValue
Es una cadena que contiene el valor por defecto que se le ha
dado a uno de estos objetos por defecto.
maxlength
Número máximo de caracteres que puede contener el campo
de texto.
 Métodos
blur() Pierde el foco del ratón sobre el objeto especificado.
focus() Obtiene el foco del ratón sobre el objeto especificado.

select() Selecciona el texto dentro del objeto dado.
<HTML>
<HEAD>
<title>Ejemplo de Text, Textarea y Password</title>
</HEAD>

</script>
<BODY>
Nombre:
<input type="text" name="nombre" value="Tu nombre"
maxlength="15"><br>
Password:
<input type="password" name="pass" maxlength="10"><br>
Comentario:
<textarea name="coment" cols=30 rows=3></textarea>
</form>
<a href="javascript:Mostrar();">Mostrar datos</a><br></BODY>
</HTML>

Ejemplos
1. Presentar un texto en movimiento en la barra de
estado del navegador. Ya estás comprobando su
funcionamiento. ¿Lo ves?

</script>
<body
onload="pon_scroll()">

2. Quitar el scroll de antes, que es un poquito
pesado:

</script>
<input type="button"
value="Quitar scroll barra de estado"
onClick="quita_scroll();">
3. Presentar en un popup la fecha actual.
<script
language ="JavaScript"> <!--
function FechaHoy()
{
var
hoy = new Date();

var VDias = new
Array("Domingo","Lunes","Martes","Miércoles",
"Jueves","Viernes","Sábado");
var VMeses
= new Array("Enero","Febrero","Marzo","Abril",
"Mayo","Junio","Julio","Agosto","Septiembre",
"Octubre","Noviembre","Diciembre");
var fecha=VDias[hoy.getDay()]+",
"+
hoy.getDate()+" de "+
VMeses[hoy.getMonth()]+"
de "+
hoy.getYear();
VentanaFecha= window.open("","popWin",
"toolbar=no,width=250,height=5");
VentanaFecha.document.open();
VentanaFecha.document.write(fecha);
VentanaFecha.document.close();
}
//-->

</script>
3. Cronómetro.
var CronoID = null;
var CronoEjecutandose = false;
var decimas, segundos,
minutos;
function DetenerCrono ()
{
if(CronoEjecutandose)
clearTimeout(CronoID);
CronoEjecutandose=
false;
}
function InicializarCrono ()
{
decimas = 0; segundos = 0;
minutos = 0;
document.crono.display.value = '00:00:0';
document.crono.parcial.value
= '00:00:0';
}
function MostrarCrono ()
{

decimas++;
if ( decimas
> 9 )
{
decimas = 0;
segundos++;
if ( segundos > 59 )
{
segundos = 0;
minutos++;
if ( minutos > 99 )
{
alert('Fin
de la cuenta');
DetenerCrono();
return true;
}
}
}
var ValorCrono
= "";
ValorCrono = (minutos < 10) ? "0" + minutos :
minutos;
ValorCrono += (segundos < 10) ? ":0" + segundos :
":"

+ segundos;
ValorCrono += ":" + decimas;
document.crono.display.value
= ValorCrono;
CronoID = setTimeout("MostrarCrono()", 100);
CronoEjecutandose
= true;
return true;
}
function IniciarCrono ()
{
DetenerCrono();
InicializarCrono();
MostrarCrono();
}
function
ObtenerParcial()
{
document.crono.parcial.value =
document.crono.display.value;
}
</script>
En body deberemos incluir:
<form name="crono">
<div
align="center"><center>
<p>
<input type="text"

size="8" name="display" value="00:00:0">
<input
type="button" name="Iniciar" value=" Iniciar "
onClick="IniciarCrono()">
</p>
<p>
<input
type="text" size="8" name="parcial"
value="00:00:0
">
<input type="button" name="Parcial"
value="Parcial"
onClick="ObtenerParcial()">
</p>
<p>
<input
type="button" name="Parar" value="Parar"
onClick="DetenerCrono()">
<input

type="button" name="Cero" value=" Cero "
onClick="DetenerCrono();InicializarCrono()">
</p>
</center></div>
</form>
Principio del formulario
00:00:0
00:00:0
Final del formulario
Próximamente añadiré más ejemplos a esta página
que sean más atractivos

Objetos del Navegador JS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Objetos del Navegador JS

Similar a Objetos del Navegador JS (20)

Más de FRANCIACOCO

Más de FRANCIACOCO (20)

Último

Último (8)

Objetos del Navegador JS