В этой статье описывается, как реализовать бары прогресса от JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
1.SetTimeout и ClearTimeOut
<html> <head> <Title> Bar Progress </title> <style type = "text/css"> .container {width: 450px; Граница: 1PX SOLIT #6C9C2C; Высота: 25px; } #bar {founale: #95Ca0d; Плавание: осталось; высота: 100%; Текст-альбом: Центр; высота линии: 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 (timeout); возвращаться; } 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>Изображение воспроизведения:
2.SetInterval и ClearInterval
<html> <head> <Title> Bar Progress </title> <style type = "text/css"> .processcontainer {width: 450px; Граница: 1PX SOLIT #6C9C2C; Высота: 25px; } #processbar {founale: #95CA0D; Плавание: осталось; высота: 100%; Текст-альбом: Центр; высота линии: 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>Изображение воспроизведения:
3. разница между SetTimeout и SetInterval
setTimeout () выполняет код только один раз. Если вы хотите позвонить несколько раз, используйте setInterval (), метод setInterval () будет продолжать вызывать функцию до тех пор, пока не будет вызван ClearInterval () или окно не будет закрыто, или позвольте саму код SETTIMEOUT () снова.
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.