Este artigo descreve como implementar barras de progresso pelo JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
1.SetTimeout e ClearTimeout
<html> <head> <title> Barra de progresso </ititle> <style type = "text/css"> .Container {width: 450px; borda: 1px Solid #6C9C2C; Altura: 25px; } #bar {Background: #95CA0D; flutuar: esquerda; Altura: 100%; Alinhamento de texto: centro; altura da linha: 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 (tempo limite); retornar; } var timeout = window.setTimeout ("run ()", 100); } window.onload = function () {run (); } </script> </ad Head> <body> <div> <div id = "bar"> </div> </div> <span id = "total"> </span> </body> </html>Imagem de reprodução:
2.SetInterval e ClearInterval
<html> <head> <title> Barra de progresso </ititle> <style type = "text/css"> .processContainer {width: 450px; borda: 1px Solid #6C9C2C; Altura: 25px; } #ProcessBar {Background: #95CA0D; flutuar: esquerda; Altura: 100%; Alinhamento de texto: centro; altura da linha: 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>Imagem de reprodução:
3. A diferença entre o setTimeout e o setInterval
setTimeout () executa o código apenas uma vez. Se você deseja ligar várias vezes, use setInterval (), o método setInterval () continuará chamando a função até que o clearInterval () seja chamado ou a janela seja fechada ou deixe o código próprio chamado setTimeout () novamente.
Espero que este artigo seja útil para a programação JavaScript de todos.