He creado una barra de progreso circular en una página HTML que se ejecuta en un PLC. Me gustaría que la animación fuera más fluida al aumentar la cantidad de incrementos necesarios para completar el arco del lienzo HTML.
La variable leída del PLC incrementa 0,27 cada segundo. Mi objetivo es que mi barra de progreso haga 10 incrementos de 0,027 entre cada lectura de mi PLC para que la animación de las barras de progreso parezca más fluida. En este momento, solo estoy viendo este valor como un número. Ordenaré la parte del arco de mi código una vez que tenga los 10 incrementos de 0.027 partes funcionando.
Con el código que tengo actualmente, el número salta mucho.
var cratio = ((v2.nodeValue/360)*100); for (var i = 0; i < 10; i++) { setInterval(function () { var cratio2 = (cratio + 0.027); var cratio3 = cratio2.toFixed(2); document.getElementById("cycleratio").innerHTML = cratio3 + "%"; cratio = cratio3; }, 10); }Tengo la totalidad del código anterior dentro de otro bucle setInterval que ejecuta la función cada 100 ms y luego, como puede ver, incremento esta función cada 10 ms.
Creo que no funciona porque no estoy restableciendo la variable i y estoy redefiniendo cratio antes de que se completen los 10 incrementos de 0.027, pero he intentado arreglar esto durante horas y no he llegado a ninguna parte.
Agradecería cualquier ayuda. Gracias
Según sus soluciones, no estoy muy seguro de haber entendido lo que está haciendo, pero si desea aumentar un número cada 100 ms, funcionará para usted.
var cratio = ((v2.nodeValue/360)*100); const interval = setInterval(() => { cratio += 0.027 document.getElementById("cycleratio").innerHTML = cratio.toFixed(2) + "%"; if (cratio >= 100) //or any number which is your max clearInterval(interval) }, 100)