JS 진행률 표시줄 효과 구현 코드 organization_javascript 기술
첫 번째 방법:
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 = "
strLoading = "
"; strLoading = "" 콘텐츠 "" strLoading = "< ;/td>"; strLoading = " |
"; strLoading = " | ";
strLoading = "
document.getElementById("loading_div").innerHTML = strLoading;
}
사용 페이지:
코드 복사
🎜>
JS 구현 진행률 표시 기능
코드 복사
코드는 다음과 같습니다.
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
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)
}
이미지 로딩 진행 상황이 실시간으로 표시됩니다
코드 복사
코드는 다음과 같습니다.
<스크립트>
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
}
}
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";
}
<본문>
<스크립트>
sum=l=imgs.length;
for (var i=0;i
imgs[i].onerror=chk;//无论图文是否加载成功,tour执行指정방법
}