Comunidad PHPeros
Lenguajes => JavaScript => Mensaje iniciado por: naveda en 01 de Enero de 2007, 18:23:02 pm
-
Ahora cuando estaba creando el instalador v3 para el minichat se me ha ocurrido crear una barra de progreso para la instalación y quería probar si con javascript sabría hacerlo ;)
Pues aquí teneis el codigo que he conseguido ejejej, funciona correctamente en IE y Firefox. :P
<html>
<head>
<title>Barra de Progreso</title>
<script language="javascript">
var ancho = 1;
function celda() {
document.getElementById("celda1").width = ancho;
ancho = ancho+1
setTimeout("celda()",10);
}
</script>
</head>
<body onload="celda();">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td id="celda1" width="10%" bgcolor="#00FF00"> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Lo que he hecho es sencillo, con una explicación sencilla servirá.
Con la linea (var ancho = 1;) defino el ancho de la celda que va ser la barra de progreso, despues creo una funcion que se encargará cada 0,1 segundo de actualizar el ancho de la celda sumando 1 pixel de anchurá a la anchura que tenia antes.
Con esto y la funcion setTimeout() (es la que actualiza cada X tiempo) conseguimos el efecto deseado :P
-
No lo he probado ... Pero si funciona como dices, tiene que estar wapiximo !!!! xD
-
si funcciona pero no se para que sirve xD! solo hay una barra que se llena hasta que llega al otro lado de la pantalla xD!
-
Pues el progreso ... xD