JavaScript 진행률 표시줄 컨트롤 구현 예

이전 글에서는 JavaScript 진행률 표시줄을 구현하는 여러 가지 방법과 진행률 표시줄의 JavaScript 기본 구현 사례를 소개했으므로 오늘은 계속해서 JavaScript 진행률 표시줄 컨트롤 구현의 예를 소개하겠습니다. !

먼저 범위가 포함된 p를 정의합니다.

<p id="loadbar">
<span id="bar"  style="width: 10%;">10%</span>
</p>

그런 다음 CSS를 사용하여 진행률 표시줄의 스타일을 완성합니다.

	p#loadbar{
				width:300px;
				background-color: silver;
				border:1px solid salmon;
				text-align: center;
				border-radius:8px ;
			}
			#bar{
				display: block;
				font-family: arial;
				font-size: 12px;
				background-color: sandybrown;
				text-align: center;
				padding: 5px;
				border-radius:5px ;
				 
			}

마지막으로 js를 사용하여 진행률 표시줄 표시를 제어합니다.

		var i=0; 
			function startbar(){
				var showbar=setInterval("setbar()",1000);
			}
			function setbar(){
				console.log("setbar");
				i+=5;
				if(i>=100)
				{ 
					clearInterval(showbar);
			    }
				document.getElementById("bar").style.width=i+"%";
				document.getElementById("bar").innerHTML=i+"%";
			}
			
			startbar();

효과 다음과 같습니다:

요약:

친구 여러분, 이 기사를 공부하면서 JavaScript 진행률 표시줄 제어 구현에 대해 어느 정도 이해하게 되셨기를 바랍니다. 당신의 작업에 도움이 될 것입니다!

관련 권장사항:

JavaScript에서 진행률 표시줄을 구현하는 여러 방법 소개

진행률 표시줄을 구현하는 JavaScript 네이티브 코드

JS 기본 업로드 파일 표시 진행률 표시줄-php 업로드 파일

위 내용은 JavaScript 진행률 표시줄 컨트롤 구현 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!