집 >웹 프론트엔드 >JS 튜토리얼 >JS 진행률 표시줄 효과 구현 코드 organization_javascript 기술

JS 진행률 표시줄 효과 구현 코드 organization_javascript 기술

WBOY원래의: 2016-05-16 18:06:281157검색

첫 번째 방법:
Loading.js

코드 복사 코드는 다음과 같습니다.

/ /빈도
var 빈도 = 50;//단계 크기
var 단계 = 3
//배경 색상
var loadingBgcolor = "#ffffff" Width
var loadingWidth = 354;

/*
*매개변수 설명:
*content: 콘텐츠 표시, 비어 있을 수 있음
*imageURL: 참조된 경로만 설정합니다. JS 파일
*left: 진행률 표시줄 표시 위치 왼쪽
*top: 진행률 표시줄 표시 위치 위쪽
*/
function Loading(content, imageURL, left, top)
{
imageURL = imageURL "Loading.jpg";

LoadTable(content, imageURL, 왼쪽, 상단)
showimage.style.display=""
window.setInterval("RefAct() ;" , 주파수);
}

function RefAct()
{
imgAct.width = step;
if(imgAct.width > loadingWidth-4)
{
imgAct.width = 0;
}
}

함수 LoadTable(content, imageURL, left, top)
{
var strLoading; "" ;
strLoading = "" ;

document.getElementById("loading_div").innerHTML = strLoading;
}

사용 페이지:

코드 복사

코드는 다음과 같습니다.

제목 없는 문서<div class="codebody" id="code82385"> <meta http-equiv="Content-Type" content="text/html; =gb2312"><script src="LoadingJS/Loading.js" type="text/javascript"></script> </head> <body> <input type="button" name="Button" value="Button" onclick="Loading('레이블 내용 표시', 'LoadingJS/', 20, 100)"> 🎜><div id="loading_div" ></div> </html> JS 구현 진행률 표시 기능 코드 복사</div> 코드는 다음과 같습니다. <div class="codebody" id="code60359"> progress.js 클래스 파일: $ = function (id) { return document.getElementById(id); } //텍스트를 JSON 문자열로 변환 String.prototype.toJson = function () { if (this == ) { return null } else { try { return eval(( this.replace(/rn/g, rn) )); } catch (err) { } } }; String.prototype.format = function () { var newStr = this; var reg = null for (var i = 0; i <args.length; i ) { reg = RegExp('{' (i) '}', 'gm'); newStr = newStr.replace(reg, 인수[i]) } return newStr; //진행률 표시줄 클래스 function Progress(objId) { //window.setInterval 객체 this.interval = null //진행률 표시줄 객체 ID this. = objId; //현재 진행 상황의 시작 진행률은 0입니다. this.progress = 0 //진행률 표시줄에는 진행 상황의 DIV ID가 표시됩니다. this.progressId = inner this .id //진행률 표시줄 테두리 ID this.progressFrameId = 프레임 this.id //진행률 표시줄 클래스 매개변수 구성 this.config = { //Width 너비: 150 , //높이 높이: 20, //왼쪽 여백 왼쪽: 0, //상단 여백 상단: 0, / /진행률 색상 progressColor: red, //테두리 색상 borderColor: #ccc, //테두리 너비 borderHeight: 2, //간격 후 진행률 숨기기 진행이 완료된 후 N초 동안 Bar 0이 즉시 숨겨집니다 hiddenSplit:2000 } } //진행률 표시줄 클래스 초기화 방법 Progress.prototype.init = function () { //새 진행 테두리 DIV var Progressdiv = document.createElement(div); //테두리 DIV 스타일 var Progressdiv_css_text = position:absolute;width:{0}px;height: {1}px;left: {2}px;top:{3}px;border:{4} {5}px solid;.format ( this.config.width, this. config.height, this.config.left, this.config.top, this.config.borderColor, this.config.borderHeight ); 0으로 진행 this.progress = 0; //테두리 ID 설정 progressdiv.id = this.progressFrameId //테두리 스타일 설정 progressdiv.style.cssText = Progressdiv_css_text; //진행 표시줄 HTML 설정 progressdiv.innerHTML = ' '.format(this.progressId, this.config.height, this.config.progressColor); /본문에 추가 document .body.appendChild(progressdiv); }//진행률 표시줄 숨겨진 함수 Progress.prototype.hiddenProgress = function () { document.body. RemoveChild(document.getElementById(this.progressFrameId)); window.clearInterval(this.interval); } //진행이 끝나면 함수가 실행됩니다. Progress.prototype.complete = function () { window.clearInterval(this.interval); this.interval = window.setTimeout(this.id .hiddenProgress();,this.config.hiddenSplit) if(this.completeCallBack) this.completeCallBack( ); } } //각 진행 실행 후 콜백 함수 Progress.prototype.callback = function () { var ProgressDiv = document. getElementById(this.progressId) ; var ProgressFrameDiv = document.getElementById(this.progressFrameId); progressDiv.innerHTML = (this.progress*100) progressFrameDiv.title = 업로드 진행률: (this .progress*100) % ; progressDiv.style.width = (this.progress*100) % if (this.progress >= 1) { this.complete(); >progressDiv.innerHTML = 파일 업로드 성공! } } //진행률 표시줄 실행 기능. 사용자는 Progress.prototype.run = function () { alert(비동기 진행 요청을 구현하려면 this.id .run 메소드를 구현하고, 다시 게시할 때 this.id .callback 메소드를 다시 콜백하세요.) ); window.clearInterval(this.interval); } //진행 시작 Progress.prototype.start = function () { this.init(); this.interval = window.setInterval(this.id .run(), 1000) } 이미지 로딩 진행 상황이 실시간으로 표시됩니다 코드 복사 </div> 코드는 다음과 같습니다. <div class="codebody" id="code99880"> <스크립트> var l=0; var imgs; var sum=0; var imgs=new 배열(); 함수 chk(){ l--; document.getElementById("aa").innerText="" ((sum-l)*100/sum) "%" if (l==0){ for (var i=0 ;i<sumi ) document.body.innerHTML ="<img src='" imgs[i].src "'>" } } if (document.images){ imgs[0]=new Image() imgs[1]=new Image() imgs[2]= 새 이미지() imgs[3]=새 이미지() imgs[4]=새 이미지() imgs[5]=새 이미지() imgs[6]=새 이미지 () imgs[7]=new Image() imgs[0].src="/articleimg/2006/08/3859/01.jpg"; imgs[1].src="/articleimg/2006/08/3859/02.jpg"; imgs[2].src="/articleimg/2006/08/3859/03.jpg"; imgs[3].src="/articleimg/2006/08/3859/04.jpg"; imgs[4].src="/articleimg/2006/08/3859/05.jpg"; imgs[5].src="/articleimg/2006/08/3859/06.jpg"; imgs[6].src="/articleimg/2006/08/3859/07.jpg"; imgs[7].src="/articleimg/2006/08/3859/08.jpg"; } </script> <본문> <div id="aa">0%</div> <스크립트> sum=l=imgs.length; for (var i=0;i<l;i ){ imgs[i].onload=chk; imgs[i].onerror=chk;//无论图文是否加载成功，tour执行指정방법 } </script> </body> </div>

성명：

이전 기사：js_javascript 스킬 중 String 객체 대체 사용에 대한 자세한 설명다음 기사：js_javascript 스킬 중 String 객체 대체 사용에 대한 자세한 설명

JS 진행률 표시줄 효과 구현 코드 organization_javascript 기술

관련 기사