Foros del Web » Programando para Internet » Javascript »

contador/arriba abajo con loop

 Estas en el tema de contador/arriba abajo con loop en el foro de Javascript en Foros del Web. Estoy peleando con esto y decididamente me bloquee, asi que corto por lo sano y pregunto a los expertos. La idea es la siguiente, crear ...
  #1 (permalink)  
Antiguo 05/06/2012, 02:38
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
contador/arriba abajo con loop
Estoy peleando con esto y decididamente me bloquee, asi que corto por lo sano y pregunto a los expertos.
La idea es la siguiente, crear un contador/timer que vaya de 0 a 1 y de 1 a 0, en forma indefinida, utilizando como intervalo el valor 0.1, es decir tendria que ir haciendo
0
0.1
0.2
0.3
...
0.9
1
comenzar a decrecer
0.9
0.8
...
0.2
0.1
0

y ahi de vuelta para arriba, el tiempo no importa, pueden ser 500ms, 1000ms ó 2000, la cosa es que se repita el ciclo

Hice las mil y un variantes, pero siempre fallaba algo, de los mejores resultados les paso este

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <script type="text/javascript">
  8. //<![CDATA[
  9. var i = 0;
  10. var e = "";
  11. var sint;
  12. var sint2;
  13. var z = 9;
  14. function sube(){
  15. if(i == 10){
  16. document.getElementById("timer").innerHTML=1;
  17. e = i;
  18. corre();
  19. }else{
  20. document.getElementById("timer").innerHTML='0.'+i;
  21. i++;
  22. }
  23. }
  24.  
  25. function baja(){
  26. if(z == 0){
  27. document.getElementById("timer").innerHTML=0;
  28. e = '';
  29. corre();
  30. }else{
  31. document.getElementById("timer").innerHTML='0.'+z;
  32. z--;
  33. }
  34. }
  35.  
  36. function corre(){
  37. if(e != ''){
  38. clearInterval(sint);
  39. sint2=setInterval("baja()",1000);
  40. }else{
  41. if(i < 11){
  42. clearInterval(sint2);
  43. sint=setInterval("sube()",1000);
  44. }
  45. }
  46. }
  47. window.onload = corre;
  48.  
  49. //]]>
  50. </script>
  51. </head>
  52. <body>
  53. <span id="timer"></span>
  54. </body>
  55. </html>

cuando se ejecuta, empieza en 0, llega al 1, baja al 0....pero, ahi emppieza a alternar entre 0 y 1, de lo que se deduce que lo que la script hace en ese punto es alternar entre
document.getElementById("timer").innerHTML=1;
y
document.getElementById("timer").innerHTML=0;

lo que indica que los clearInterval no estarían funcionando y que las funciones sube() y baja() siguen ejecutándose con los valores de z e i clavados en 0 y 10 respectivamente.
A lo mejor con un pequeño toque (pequeño para quién sepa hacerlo) se corrije, o a lo mejor tomé el camino equivocado y hay que hacer otra cosa.
Como la criatura me superó, espero que algún padrino, se haga cargo
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #2 (permalink)  
Antiguo 05/06/2012, 03:24
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 17 años, 5 meses
Puntos: 56
Respuesta: contador/arriba abajo con loop
Código HTML: 
Ver original
  1. <span id="timer">0</span>​

Código Javascript: 
Ver original
  1. var obj = document.getElementById("timer"), dec = 1, est = 1
  2.  
  3. function loop(){
  4.     obj.innerHTML = dec == 10 ? "1" : "0" + (dec == 0 ? "" : "." + dec)
  5.     if(dec == 10) est = 0
  6.     if(dec === 0) est = 1
  7.     est ? dec++ : dec--
  8. }
  9.  
  10. setInterval(loop,500)
  11. &#8203;

Puedes editar la función e ir sumando directamente 0.X+0.1 pero Javascript está inquieto y no me devuelve exactamente 0.2+0.1

http://jsfiddle.net/wZVanG/8427K/
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #3 (permalink)  
Antiguo 05/06/2012, 03:38
Avatar de cristian_cena
Colaborador
  
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: contador/arriba abajo con loop
siguiendo tu código, podrías probar añadiendo:
Código Javascript: 
Ver original
  1. function baja(){
  2.     if(z == 0){
  3.         document.getElementById("timer").innerHTML=0;
  4.         e = '';
  5.         corre();
  6.         z = 9;  // ESTO Y
  7.         i = 0;  // ESTO
  8.     }else{
  9.         document.getElementById("timer").innerHTML='0.'+z;
  10.         z--;
  11.     }
  12. }
Ejemplo: http://jsfiddle.net/cristian_cena/Mbcpv/
  #4 (permalink)  
Antiguo 05/06/2012, 04:54
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: contador/arriba abajo con loop
Cita:
Iniciado por America|UNK Ver Mensaje
Código HTML: 
Ver original
  1. <span id="timer">0</span>​

Código Javascript: 
Ver original
  1. var obj = document.getElementById("timer"), dec = 1, est = 1
  2.  
  3. function loop(){
  4.     obj.innerHTML = dec == 10 ? "1" : "0" + (dec == 0 ? "" : "." + dec)
  5.     if(dec == 10) est = 0
  6.     if(dec === 0) est = 1
  7.     est ? dec++ : dec--
  8. }
  9.  
  10. setInterval(loop,500)
  11. &#8203;

Puedes editar la función e ir sumando directamente 0.X+0.1 pero Javascript está inquieto y no me devuelve exactamente 0.2+0.1

http://jsfiddle.net/wZVanG/8427K/

Así está perfecto, ya la adapté a lo que necesito, una de mis pruebas fue lo de ir sumando directamente, pero vaya a saber porque obtenia

0.1
0.2
0.3
0.5
0.699999899999
0.7
0.89999909999
y terminé yendo por otro lado
mil gracias @America|UNK


Cita:
Iniciado por cristian_cena Ver Mensaje
siguiendo tu código, podrías probar añadiendo:
Código Javascript: 
Ver original
  1. function baja(){
  2.     if(z == 0){
  3.         document.getElementById("timer").innerHTML=0;
  4.         e = '';
  5.         corre();
  6.         z = 9;  // ESTO Y
  7.         i = 0;  // ESTO
  8.     }else{
  9.         document.getElementById("timer").innerHTML='0.'+z;
  10.         z--;
  11.     }
  12. }
Ejemplo: http://jsfiddle.net/cristian_cena/Mbcpv/
Gracias Cristian, lo voy a mirar para sacrme el gusto nomás, pero mañana, porque hoy al engendro este no lo quiero ver más

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 05/06/2012, 13:47
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: contador/arriba abajo con loop
este código no difiere mucho del que posteó America|UNK. pero, como no hay muchas ocasiones de usar variables de variables pues ahí va
Cita:
var dec = 0, est = 1, valor = 0;

function loop(){
if (dec == 10) {
est = (valor = dec/10);
} else {
if (dec == 0)
est = (valor = dec/10);
valor = dec/10;
}

est ? dec-- : dec++;

document.getElementById('timer').innerHTML = valor;

}

window.onload = function() {setInterval(loop,500);}
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: contador, loop
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:40.