Hoy, se implementa un proceso de carga de la barra de progreso, y la estructura DOM es en realidad dos divs
<Div> <div id = "porcentaje_bar"> </div> </div>
Al controlar el atributo de ancho amplio del DIV interno, puede lograr el efecto de avanzar en la barra de progreso.
Mi barra de progreso muestra el progreso de la descarga de archivos. Si simplemente implementa un total de 100 archivos, descargar uno será del 1%y la descarga 20 alcanzará el 20%. Entonces, el código se implementa de la siguiente manera:
var fileCount = fileList.length (); fileList.ForEach (function (i, obj) {..... // Descargar archivo documento.getElementById ("porcentaje_bar"). style.width = i/fileCount*100 + "%"; // Cambiar el ancho del Div})Pero verá archivos descargados uno por uno, pero el progreso no se ha movido. Esto se debe a que JS Logic se ejecutará primero, y la representación de la página se realizará solo después de que se termine la ejecución de JS, por lo que no puede ver una barra de progreso normal.
¿Cómo puedo hacer que JS Logic se ejecute y esperar la representación de la página de primera clase?
var i = 0; var fileCount = fileList.length (); var bucle = function () {if (i> fileCount) // Salga de la devolución del bucle; ...... // Descargar archivo i ++; document.getElementById ("porcentaje"). style.width = i/fileCount*100+"%"; // siguiente bucle que.loopid = window.setTimeout (bucle, 0); 7} that.loopid = window.setTimeout (bucle, 0);El efecto dinámico de la barra de progreso se puede lograr a través de la función SetTimeOut.
El artículo anterior resuelve rápidamente el problema de la representación oportuna de las páginas después de cambiar dinámicamente los atributos de los elementos DOM de JS es todo el contenido compartido por el editor. Espero que pueda darle una referencia y espero que todos puedan apoyar más a Wulin.com.