Este artículo describe cómo implementar barras de progreso de JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
1.SettimeOut y ClearTimeOut
<html> <head> <title> Progress Bar </title> <style type = "text/css"> .container {width: 450px; borde: 1px sólido #6c9c2c; Altura: 25px; } #bar {fondo: #95ca0d; flotante: izquierda; Altura: 100%; Text-Align: Center; Alganche de línea: 150%; } </style> <script type = "text/javaScript"> function run () {var bar = document.getElementById ("bar"); var total = document.getElementById ("total"); bar.style.width = parseint (bar.style.width) + 1 + "%"; total.innerhtml = bar.style.width; if (bar.style.width == "100%") {Window.ClearTimeOut (Tiempo de espera); devolver; } var timeout = window.setTimeOut ("run ()", 100); } window.onload = function () {run (); } </script> </head> <body> <div> <div id = "bar"> </div> </div> <span id = "total"> </span> </body> </html>Imagen de reproducción:
2.SetInterval y ClearInterval
<html> <head> <title> Progress Bar </title> <style type = "text/css"> .processContainer {width: 450px; borde: 1px sólido #6c9c2c; Altura: 25px; } #processbar {fondo: #95ca0d; flotante: izquierda; Altura: 100%; Text-Align: Center; Alganche de línea: 150%; } </style> <script type = "text/javaScript"> function setProcess () {var processbar = document.getElementById ("ProcessBar"); ProcessBar.Style.Width = parseInt (ProcessBar.Style.Width) + 1 + "%"; ProcessBar.innerhtml = ProcessBar.Style.Width; if (ProcessBar.Style.Width == "100%") {Window.ClearInterval (Bartimer); }} var Bartimer = Window.SetInterval (function () {setProcess ();}, 100); Window.Onload = function () {Bartimer; } </script> </head> <body> <div> <div id = "ProcessBar"> </div> </div> </body> </html>Imagen de reproducción:
3. La diferencia entre SetTimeOut y SetInterval
setTimeOut () ejecuta el código solo una vez. Si desea llamar varias veces, use SetInterval (), el método SetInterval () seguirá llamando a la función hasta que se llame ClearInterval () o se cierre la ventana, o dejará que el código en sí llame a SetTimeout () nuevamente.
Espero que este artículo sea útil para la programación de JavaScript de todos.