이 기사에서는 JS에 의해 진행률 표시 줄을 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
1. 세트 타임 아웃 및 클리어 타임 아웃
<html> <head> <title> 진행률 바 </title> <스타일 유형 = "text/css"> .Container {width : 450px; 국경 : 1px 고체 #6c9c2c; 높이 : 25px; } #bar {배경 : #95ca0d; 플로트 : 왼쪽; 높이 : 100%; 텍스트 정렬 : 센터; 라인 높이 : 150%; }. 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 (); .생식 이미지 :
2. 세트 interval 및 clearinterval
<html> <head> <title> 진행률 바 </title> <스타일 유형 = "text/css"> .ProcessContainer {width : 450px; 국경 : 1px 고체 #6c9c2c; 높이 : 25px; } #processBar {배경 : #95CA0D; 플로트 : 왼쪽; 높이 : 100%; 텍스트 정렬 : 센터; 라인 높이 : 150%; }. 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 프로그래밍에 도움이되기를 바랍니다.