Skip to main content
1 de 3

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