JS progress bar effect implementation code organization_javascript skills

The first method:
Loading.js

Copy code The code is as follows:

/ /Frequency
var frequency = 50;
//Step size
var step = 3;
//Background color
var loadingBgcolor = "#ffffff";
//Width
var loadingWidth = 354;

/*
*Parameter description:
*content: Display content, can be empty;
*imageURL: Just set the path of the referenced JS file ;
*left: progress bar display position left
*top: progress bar display position top
*/
function Loading(content, imageURL, left, top)
{
imageURL = imageURL "Loading.jpg";

LoadTable(content, imageURL, left, top);
showimage.style.display="";
window.setInterval("RefAct();" , frequency);
}

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

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

";
strLoading = "if(content != "")
{
strLoading = "";
strLoading = "";
strLoading = "";
}
strLoading = "";
strLoading = "";
strLoading = "

";
strLoading = "" content "";
strLoading = "< ;/td>";
strLoading = "

";
strLoading = "";
strLoading = "

";
strLoading = "

";

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

Use page:

Copy Code The code is as follows:

< html>

Second method:
JS implements the progress display function

Copy code The code is as follows:

progress.js class file:

$ = function (id) {
return document.getElementById(id);
}
//Convert text to JSON string
String.prototype.toJson = function () {
if (this == ) {
return null;
}
else {
try {
return eval(( this.replace(/rn/g, rn) ));
}
catch (err) {
}
}
};
//Character formatting method
String.prototype.format = function () {
var newStr = this;
var reg = null;
for (var i = 0; i < arguments.length; i ) {
reg = RegExp('{' (i) '}', 'gm');
newStr = newStr.replace(reg, arguments[i]);
}
return newStr;
} ;
//Progress bar class
function Progress(objId) {
//window.setInterval object
this.interval = null;
//Progress bar object ID
this. id = objId;
//The starting progress of the current progress is 0
this.progress = 0;
//The progress bar displays the DIV ID of the progress
this.progressId = inner this.id;
//Progress bar border ID
this.progressFrameId = frame this.id;
//Progress bar class parameter configuration
this.config = {
//Width
width: 150 ,
//Height
height: 20,
//Left margin
left: 0,
//Top margin
top: 0,
//Progress color
progressColor: red,
//Border color
borderColor: #ccc,
//Border width
borderHeight: 2,
//Hide the progress after an interval of N seconds after the progress is completed Bar 0 is hidden immediately
hiddenSplit:2000
};
}
//Progress bar class initialization method
Progress.prototype.init = function () {
//New progress Border DIV
var progressdiv = document.createElement(div);
//Border DIV style
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
);
//Reset progress to 0
this.progress = 0;
//Set the border ID
progressdiv.id = this.progressFrameId;
//Set the border style
progressdiv.style.cssText = progressdiv_css_text;
//Set Progress bar HTML
progressdiv.innerHTML = '

'.format(this.progressId, this.config.height, this.config.progressColor);
//Add to body
document .body.appendChild(progressdiv);
};
//Progress bar hidden function
Progress.prototype.hiddenProgress = function () {
document.body.removeChild(document.getElementById(this. progressFrameId));
window.clearInterval(this.interval);
}
//Function triggered when progress ends
Progress.prototype.complete = function () {
window.clearInterval (this.interval);
this.interval = window.setTimeout(this.id .hiddenProgress();,this.config.hiddenSplit);
if (this.completeCallBack) {
this.completeCallBack( );
}
}
//The callback function after each progress run
Progress.prototype.callback = function () {
var progressDiv = document.getElementById(this.progressId) ;
var progressFrameDiv = document.getElementById(this.progressFrameId);
progressDiv.innerHTML = (this.progress*100) %;
progressFrameDiv.title = Upload progress: (this.progress*100) % ;
progressDiv.style.width = (this.progress*100) %;
if (this.progress >= 1) {
this.complete();
progressDiv.innerHTML = file Upload successful!;
}
}
//Progress bar running function. Users need to implement
Progress.prototype.run = function () {
alert(Please implement this.id .run method to implement asynchronous progress request, and please call back this.id .callback method when posting back.);
window.clearInterval(this.interval);
}
//Start progress
Progress.prototype.start = function () {
this.init();
this. interval = window.setInterval(this.id .run(), 1000);
}

Image loading progress is displayed in real time

Copy the code The code is as follows:

<script> <br>var l=0; <br>var imgs; <br>var sum=0; <br>var imgs=new Array(); <br>function chk(){ <br>l--; <br>document.getElementById("aa").innerText="" ((sum-l)*100/sum) "%" <br>if (l==0){ <br>for (var i=0;i<sum;i ) <BR>document.body.innerHTML ="<img src='" imgs[i].src "'>" <br>} <br>} <br>if (document.images){ <br>imgs[0]=new Image() <br>imgs[1]=new Image() <br>imgs[2]=new Image() <br>imgs[3]=new Image() <br>imgs[4]=new Image() <br>imgs[5]=new Image() <br>imgs[6]=new Image() <br>imgs[7]=new Image() <br>imgs[0].src="/articleimg/2006/08/3859/01.jpg"; <br>imgs[1].src="/articleimg/2006/08/3859/02.jpg"; <br>imgs[2].src="/articleimg/2006/08/3859/03.jpg"; <br>imgs[3].src="/articleimg/2006/08/3859/04.jpg"; <br>imgs[4].src="/articleimg/2006/08/3859/05.jpg"; <br>imgs[5].src="/articleimg/2006/08/3859/06.jpg"; <br>imgs[6].src="/articleimg/2006/08/3859/07.jpg"; <br>imgs[7].src="/articleimg/2006/08/3859/08.jpg"; <br>} <br><br></script>

0%

<script> <br>sum=l=imgs.length; <br>for (var i=0;i<l;i ){ <br>imgs[i].onload=chk; <br>imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法 <br>} <br></script>