2

¡Hola buenas!

El caso es que en mi HTML tengo un texto con un número que es el valor del carrito, lo que quiero hacer es que cuando se añada un artículo nuevo y cambie el valor no cambie directamente sino que con Javascript el valor cambiado suba como en los juegos muy rápido en principio y más lento al final.

He hecho una función que se llama cada 100 ms para actualizar el valor, pero lo actualiza de 1 en 1

<text id='valor-cesta'> 2000 </text>

<script>
  //Variable global para guardar el intervalo
  var animInterval;

  function startAnim() {

    let obj = document.getElementById('valor-cesta');
    animInterval = setInterval(animNumValue, 100, obj, 3000);
  }

  function animNumValue(num, newValue) {

    valor = num.innerHTML;
    intValue = parseInt(valor);

    if (intValue >= newValue) { //Si el valor ha superado el objetivo paro
      clearInterval(animInterval);
    } else { //Si el valor no ha superado el objetivo lo aumento
      valor++;
      num.innerHTML = valor;
    }
  }
  startAnim();
</script>

3
  • pero no entiendo, tu aqui no tienes ninguna animacion?
    – Srsole
    Commented el 9 jul. 2020 a las 10:31
  • vale no es animacion, es como un contador que va incrementado, poco a poco
    – Srsole
    Commented el 9 jul. 2020 a las 10:33
  • 1
    El valor cambia cada vez que se añade un elemento a la cesta, yo lo que quiero es que no cambie el valor directamente de golpe, si no que ocurra una especie de "animación" en la que el valor suba de mucho a poco
    – Adino
    Commented el 9 jul. 2020 a las 10:51

2 respuestas 2

4

Reduce el tiempo de setInterval e incrementa el valor de acuerdo a la diferencia. Agrega, modifica o quita comparaciones de diferencia, hasta que encuentres la opción que te agrade.

<text id='valor-cesta'> 2000 </text>

<script>
  //Variable global para guardar el intervalo
  var animInterval;

  function startAnim() {

    let obj = document.getElementById('valor-cesta');
    animInterval = setInterval(animNumValue, 30, obj, 3000);
  }

  function animNumValue(num, newValue) {

    let valor = parseInt(num.innerText);
    if (valor >= newValue) {
      //Si el valor ha superado el objetivo paro
      clearInterval(animInterval);
    } else {
      //Si el valor no ha superado el objetivo lo aumento
      let diferencia = newValue - valor;
      // A mayor diferencia, mayor incremento
      if(diferencia > 225) {
          valor += 219; // Valores no exactos para ver cambios en contador
      } else if(diferencia > 100) {
          valor += 95;
      } else if(diferencia > 10) {
          valor += 6;
      } else {
          valor++;
      }
      num.innerText = valor;
    }
  }
  startAnim();
</script>

Actualización

Otra opción es dividir la diferencia para buscar que la duración sea similar, independientemente de la cantidad a agregar:

  //Variable global para guardar el intervalo
  var animInterval;

  function startAnim() {
    let obj = document.getElementById('valor-cesta');
    let sumar = parseInt(document.querySelector('#sumar').value);
    if(sumar > 0) {
        animInterval = setInterval(animNumValue, 30, obj, parseInt(obj.innerText) + sumar);
    }
  }

  function animNumValue(num, newValue) {

    let valor = parseInt(num.innerText);
    if (valor >= newValue) {
      //Si el valor ha superado el objetivo paro
      clearInterval(animInterval);
    } else {
      //Si el valor no ha superado el objetivo lo aumento
      let diferencia = newValue - valor;
      valor += Math.ceil(diferencia/3);

      num.innerText = valor;
    }
  }
document.querySelector('#agregar').addEventListener('click', startAnim);
<text id="valor-cesta">2000</text><br>
<input type="number" id="sumar" value=""><br>
<button id="agregar">Agregar</button>

6
  • y cuando el valor sea mayor de 2000? o mas pequeño?
    – Srsole
    Commented el 10 jul. 2020 a las 6:13
  • Por otro lado, hay veces que printa un valor superior al deseado, por las sumas no dinamicas
    – Srsole
    Commented el 10 jul. 2020 a las 6:18
  • @Srsole, probé con 300 y funcionó bien. Por otra parte, la única forma de que supere el valor deseado es que pongas la suma mayor a la comparación.
    – Triby
    Commented el 10 jul. 2020 a las 14:27
  • 1
    desde mi punto de vista son hard codes, y no lo veo funcional.
    – Srsole
    Commented el 12 jul. 2020 a las 20:32
  • ¿@Srsole, cómo lo ves ahora?
    – Triby
    Commented el 12 jul. 2020 a las 22:19
-1

Prueba asi:

//Variable global para guardar el intervalo
var animInterval;

function startAnim(){

  let obj = document.getElementById('valor-cesta');
  var x = parseInt(obj.innerHTML/3000);
  animInterval = setInterval(function(){
                    animNumValue();
                 },x);
}

function animNumValue(){

  var valor = document.getElementById('valor-cesta');
  var intValue = parseInt(valor);
  var newValue = parseInt(valor + 1)
  if(intValue >= newValue) { //Si el valor ha superado el objetivo paro
    clearInterval(animInterval);
  }else{//Si el valor no ha superado el objetivo lo aumento
    valor++;
    num.innerHTML = valor;
  }
}

Básicamente lo que pasa es que tu quieres que en 3000 milis se pare el contador, entonces hay que dividir el total de items en el carrito entre el tiempo total que quieres que dure la 'animación' De hay sale la variable x


Esta forma de hacerlo es dinámica, y el contador siempre tardara lo mismo, 3 segundos, parándose en el valor deseado.

5
  • 1
    No funciona, porque no ejecutas startAnim() y no envías parámetros a animValue(), aparte, si los envías, newValue siempre será menor que el valor inicial.
    – Triby
    Commented el 9 jul. 2020 a las 15:16
  • @Triby Hola compañero, antes que nada es solo una parte del codigo, donde llamar al metodo es cosa suya.
    – Srsole
    Commented el 10 jul. 2020 a las 6:14
  • @Triby Lo otro a hora lo edito, no es necesario tener newvalue
    – Srsole
    Commented el 10 jul. 2020 a las 6:14
  • En el código de la pregunta aparece esa línea y es conveniente crear un fragmento de código para que se pueda probar y verificar que la respuesta es adecuada. Después de la edición, tu código quedó prácticamente igual que la pregunta, sumando de uno en en uno. Por cierto, yo solo acostumbro comentar, el -1 no es mío :-)
    – Triby
    Commented el 10 jul. 2020 a las 14:38
  • @Triby suma de 1 en 1, pero a diferente velocidad, si son 10.000 se cargara en 3 segundos, es decir a 3.333,33 números por segundo, si son 2000 como el ejemplo pues 666,7 por segundo, de tu manera puedes estar siglos, y por tiempo indefinido y no lo veo bien, pues una animacion tiene inicio y tenemos que saber el fin (x segundos) es mi opinion.
    – Srsole
    Commented el 12 jul. 2020 a las 20:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.