JavaScript+CSS

[fpe 0]

<script type="text/javascript">function ir(){  carregado = document.getElementById('carregado');//  alert(carregado.style.width);  carregado.style.width += 30;}setInterval("ir()", 3000);</script><style type="text/css">#barra { border: solid 1px #000; background: blue; color: #FFF; height: 16px; width: 365px}#carregado { border: none 1px #000; background: #FFF; height: 16px; width: 0}</style><div id="barra"><div id="carregado"></div></div>

estou com este script, o probelma é que ele faz o seguinte qdo recebe 30 ele transforma em string, ficando '30px' ai na próxima vez ele faz '30px'+30 ai o debugger do meu firefox diz que é um erro.

 

Como eu posso fazer pra corrigir isto?

 

Pra ficar um pouco mais claro estou tentando fazer uma barra, daquelas que mostra o carregamento, muito utilizada em sistemas delhpi por ex.

 

o erro do FF é

 

"Erro: Erro no processamento do valor da propriedade 'width'. Declaração interrompida.

Arquivo-fonte: http://localhost/javascript.php

Linha: 0"

[Fleury 3]

var valor;if (valor.indexOf('px') != -1) {  valor = valor.substring(0,valor.indexOf('px'));  valor += 30;} else valor += 30;carregado.style.width = valor;

xD

[fpe 0]

cara eu ja tinha chegado aqui, mais ele concatena, faz 30+30 = 3030pq isso acontece??

[fpe 0]

Valeu galera meu problema foi resolvido!!

 

eu achei que ficou legal, falta mais alguns ajustes.. é claro que tambem integra-lo com alguma operação no sistema tambem não seria nada mal..

 

 

 

<script type="text/javascript">function ir(){  carregado = document.getElementById('carregado');  entrar = document.getElementById('entrar');  entrar.disabled = true;  valor = carregado.style.width;  if (valor.indexOf('px') != -1) {	valor = valor.substring(0,valor.indexOf('px'));	valor = Number(valor) + Number(1);  } else valor += 30;  if(valor >= 360)  {  valor = 360;  window.clearInterval(i_id);  entrar.disabled = !entrar.disabled;  }  carregado.style.width = valor;  exibe = (Number(100) * Number(valor)) / Number(360);  carregado.innerHTML = Math.ceil(exibe)+'%';}i_id = window.setInterval("ir()", 20);</script><style type="text/css">#barra { border: inset 1px InactiveBorder; background: #fff; height: 18px; width: 360px}#carregado { font: normal 11px verdana; text-align: center; color: #FFF; border: none 1px #000; background: Highlight; height: 18px; width: 0}#tables { display: none;}</style><div id="barra">  <div id="carregado">  </div></div><p><input type="button" Onclick="document.getElementById('tables').style.display='block'" id="entrar" value="Imprimir boleto"><div id="tables">  <table align="center" width="500" id="dados">  <tr bgcolor="#FFFFFF">		<td align="center">10693323</td>		<td align="center">00</td>		<td align="center">30/01/2006 11:49</td>		<td align="center">10.1.11.121</td>		<td align="center">A</td>	</tr>	<tr bgcolor="#FFFFFF">		<td align="center">10682263</td>		<td align="center">00</td>		<td align="center">30/01/2006 09:09</td>		<td align="center">10.1.11.121</td>		<td align="center">A</td>	</tr>	</table></div>

Ficou quase um componente completo. :)