Así que estoy trabajando en una interfaz de línea de comandos en la web. Actualmente, existe el inicio de una barra de progreso a la izquierda de la CLI y algunos comandos que funcionan. Quiero agregar más comandos, pero sentí que necesitaban tener una función de retraso de tiempo para que se sintiera más auténtico.
Quiero crear una función que, cuando se llame, divida los (ms) utilizados en el escenario por 12 (la cantidad de guiones en la barra de progreso) y muestre una actualización cada (ms).
La barra de progreso se parece a esto: [------------]
https://codepen.io/ZacV/pen/abEYpLz
function statsBar(ms){ var timeChunk = Math.round(ms/12) for (let i = 0; i < timeChunk; i++) { document.getElementById("DispStatus").innerHTML = "[" + ("|" * timeChunk) + ("-" * (12 - timeChunk)) + "]" sleep(timeChunk); } }Está bien. Después de un poco de prueba y error, encontré la forma más eficiente de terminar el fragmento de Rocky Sims. El código de Rocky Sims creó una barra de progreso realmente agradable y eficiente, sin embargo, el tamaño de la barra era inconsistente. Este producto final incluye una barra de progreso con un ancho constante para que coincida con el ancho del div. ¡Gracias por toda la ayuda de sus muchachos en esto!
function statsBar(ms){ var timeChunk = Math.round(ms/12); for (let i = 0; i <= 12; i++) { setTimeout(() => { document.getElementById("DispStatus").innerHTML = "[" + ('|'.repeat(i)) + ('-'.repeat(12 - i)) + "]"; }, i * timeChunk); } } statsBar(6000); <div id="DispStatus"></div>Puede usar setTimeout para programar actualizaciones en la barra de progreso de una sola vez, pero hacer que sucedan con el tiempo.
function statsBar(ms){ var timeChunk = Math.round(ms/12); for (let i = 0; i < 12; i++) { setTimeout(() => { document.getElementById("DispStatus").innerHTML = "[" + ('-'.repeat(i)) + "]"; }, i * timeChunk); } } statsBar(6000); <div id="DispStatus"></div>