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

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