Skip to main content
formato de código y texto
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

animacion sin jquery Incrementar animación de número con JavaScript (setinterval, settimeout, delaysin jQuery). animacion con javascript puro

hola a todos los varones genios de esta pagina.

estoyEstoy aprendiendo a hacer animaciones con javascriptJavaScript puro. Me esta costando porque mi nivel en javascript es medio y estaba demasiado acostumbrado a jquery.

basicamente Básicamente lo que quiero es esto: Que luego de 5 segundos un numeronúmero se incremente (a velocidad rapidarápida) desde 0 hasta 300, luego de otros 5 segundos de espera, que este mismo numeronúmero se incremente hasta 600, y luego de 5 segundos mas de espera, que este numero se incremente finalmente a 900... Con esto intento aprender a crear la velocidad de animacionanimación y el delay sin jquerysin jQuery.

masMás o menos lo he conseguido, pero con un codigocódigo horrible. Lo pondrepondré para que lo vean y por favor espero que me muestren como ustedes lo harian masharían más resumido (para asi aprender)o cómo podría mejorar lo que he hecho.

gracias. (leanLean mi codigocódigo desde abajo hacia arriba. primeroPrimero el settimeoutsetTimeout, luego la funcion unolas funciones uno, dosdos y tres)tres:

  var i = 0;

  function tres (  ) {
  alert( 900 )
  }

  function dos (  ) {
  function two (  ) {
    if ( i > 600 ) {
        clearInterval( this )
    } else {
        console.log( i++ )
    }
  }
  setInterval( two, 13 ); //velocidad de animacion
 
  setTimeout( tres, 5000 ) //tercer delay
   }

  function uno (  ) {
       function one (  ) {
    if ( i > 300 ) {
        clearInterval( this ) //detiene el incremento cuando llega a 300
    } else {
        console.log( i++ )
    }
  }
  setInterval( one, 13 ); //velocidad de animacion
 
  setTimeout( dos, 5000 ) //segundo delay
 }

  setTimeout( uno, 5000 ) //primer delay

animacion sin jquery (setinterval, settimeout, delay). animacion con javascript puro

hola a todos los varones genios de esta pagina.

estoy aprendiendo a hacer animaciones con javascript puro. Me esta costando porque mi nivel en javascript es medio y estaba demasiado acostumbrado a jquery.

basicamente lo que quiero es esto: Que luego de 5 segundos un numero se incremente (a velocidad rapida) desde 0 hasta 300, luego de otros 5 segundos de espera, que este mismo numero se incremente hasta 600, y luego de 5 segundos mas de espera, que este numero se incremente finalmente a 900... Con esto intento aprender a crear la velocidad de animacion y el delay sin jquery.

mas o menos lo he conseguido, pero con un codigo horrible. Lo pondre para que lo vean y por favor espero que me muestren como ustedes lo harian mas resumido (para asi aprender).

gracias. (lean mi codigo desde abajo hacia arriba. primero el settimeout, luego la funcion uno, dos y tres)

  var i = 0;

  function tres (  ) {
alert( 900 )
  }

  function dos (  ) {
function two (  ) {
    if ( i > 600 ) {
        clearInterval( this )
    } else {
        console.log( i++ )
    }
}
setInterval( two, 13 ); //velocidad de animacion
 
setTimeout( tres, 5000 ) //tercer delay
   }

  function uno (  ) {
       function one (  ) {
    if ( i > 300 ) {
        clearInterval( this ) //detiene el incremento cuando llega a 300
    } else {
        console.log( i++ )
    }
}
setInterval( one, 13 ); //velocidad de animacion
 
setTimeout( dos, 5000 ) //segundo delay
 }

  setTimeout( uno, 5000 ) //primer delay

Incrementar animación de número con JavaScript (sin jQuery)

Estoy aprendiendo a hacer animaciones con JavaScript puro. Básicamente lo que quiero es esto: Que luego de 5 segundos un número se incremente (a velocidad rápida) desde 0 hasta 300, luego de otros 5 segundos de espera, que este mismo número se incremente hasta 600, y luego de 5 segundos mas de espera, que este numero se incremente finalmente a 900... Con esto intento aprender a crear la velocidad de animación y el delay sin jQuery.

Más o menos lo he conseguido, pero con un código horrible. Lo pondré para que lo vean y por favor espero que me muestren como ustedes lo harían más resumido o cómo podría mejorar lo que he hecho.

Lean mi código desde abajo hacia arriba. Primero el setTimeout, luego las funciones uno, dos y tres:

var i = 0;

function tres() {
  alert(900)
}

function dos() {
  function two() {
    if (i > 600) {
      clearInterval(this)
    } else {
      console.log(i++)
    }
  }
  setInterval(two, 13); //velocidad de animacion
  setTimeout(tres, 5000) //tercer delay
}

function uno() {
  function one() {
    if (i > 300) {
      clearInterval(this) //detiene el incremento cuando llega a 300
    } else {
      console.log(i++)
    }
  }
  setInterval(one, 13); //velocidad de animacion
  setTimeout(dos, 5000) //segundo delay
}

setTimeout(uno, 5000) //primer delay

título editado
Enlace
user75901
user75901

animacion sin jquery (setinterval, settimeout, delay). animacion con java scriptjavascript puro

Origen Enlace

animacion sin jquery (setinterval, settimeout, delay). animacion con java script puro

hola a todos los varones genios de esta pagina.

estoy aprendiendo a hacer animaciones con javascript puro. Me esta costando porque mi nivel en javascript es medio y estaba demasiado acostumbrado a jquery.

basicamente lo que quiero es esto: Que luego de 5 segundos un numero se incremente (a velocidad rapida) desde 0 hasta 300, luego de otros 5 segundos de espera, que este mismo numero se incremente hasta 600, y luego de 5 segundos mas de espera, que este numero se incremente finalmente a 900... Con esto intento aprender a crear la velocidad de animacion y el delay sin jquery.

mas o menos lo he conseguido, pero con un codigo horrible. Lo pondre para que lo vean y por favor espero que me muestren como ustedes lo harian mas resumido (para asi aprender).

gracias. (lean mi codigo desde abajo hacia arriba. primero el settimeout, luego la funcion uno, dos y tres)

  var i = 0;

  function tres (  ) {
alert( 900 )
  }

  function dos (  ) {
function two (  ) {
    if ( i > 600 ) {
        clearInterval( this )
    } else {
        console.log( i++ )
    }
}
setInterval( two, 13 ); //velocidad de animacion

setTimeout( tres, 5000 ) //tercer delay
   }

  function uno (  ) {
       function one (  ) {
    if ( i > 300 ) {
        clearInterval( this ) //detiene el incremento cuando llega a 300
    } else {
        console.log( i++ )
    }
}
setInterval( one, 13 ); //velocidad de animacion

setTimeout( dos, 5000 ) //segundo delay
 }

  setTimeout( uno, 5000 ) //primer delay