JS 进度条效果实现代码整理

　　第一种方法:

　　Loading.js

复制代码代码如下:

　　//频率

　　var frequency = 50;

　　//步长

　　var step = 3;

　　//背景颜色

　　var loadingBgcolor = "#ffffff";

　　//宽度

　　var loadingWidth = 354;

　　*参数说明:

　　*content：显示内容，可以为空；

　　*imageURL：将引用JS文件的路径设置即可；

　　*left：进度条显示位置left

　　*top：进度条显示位置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 += "<div id=\"showimage\" style=\"DISPLAY:none;Z-INDEX:100;LEFT:" + left+ "px;POSITION:absolute;TOP:" + top+ "px;\" align=\"center\">";

　　strLoading += "<TABLE id=\"Table1\" cellSpacing=\"0\" cellPadding=\"0\" width=\"" + loadingWidth + "\" border=\"0\" bgcolor=\"" + loadingBgcolor+ "\">";

　　if(content != "")

　　{

　　strLoading += "<tr>";

　　strLoading += "<td align=\"center\">";

　　strLoading += "<font size=\"4\" face=\"Courier New, Courier, mono\"><strong>" + content + "</strong></font>";

　　strLoading += "</td>";

　　strLoading += "</tr>";

　　strLoading += "<TR>";

　　}

　　strLoading += "<TD class=\"Loading\" height=\"8\">";

　　strLoading += "<IMG id=\"imgAct\" height=\"8\" alt=\"\" src=\"" + imageURL + "\" width=\"0\">";

　　strLoading += "</TD>";

　　strLoading += "</TR>";

　　strLoading += "</TABLE>";

　　strLoading += "</div>";

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

　　}

　　使用页:

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

　　<html>

　　<head>

　　<title>Untitled Document</title>

　　</head>

　　<body>

　　</body>

　　</html>

　　第二种方法：

　　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 < arguments.length; i++) {

　　reg = RegExp('{' + (i) + '}', 'gm');

　　newStr = newStr.replace(reg, arguments[i]);

　　}

　　return newStr;

　　};

　　//进度条类

　　function Progress(objId) {

　　//window.setInterval对象

　　this.interval = null;

　　//进度条对象ID

　　this.id = objId;

　　//当前进度起始进度为0

　　this.progress = 0;

　　//进度条显示进度的DIV ID

　　this.progressId = inner + this.id;

　　//进度条边框ID

　　this.progressFrameId = frame + this.id;

　　//进度条类参数配置

　　this.config = {

　　//宽度

　　width: 150,

　　//高度

　　height: 20,

　　//左边距

　　left: 0,

　　//顶部边距

　　top: 0,

　　//进度颜色

　　progressColor: red,

　　//边框颜色

　　borderColor: #ccc,

　　//边框宽度

　　borderHeight: 2,

　　//进度完成后间隔N秒后隐藏进度条 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);

　　//加入body中

　　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 Array();

　　function chk(){

　　l--;

　　document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"

　　if (l==0){

　　for (var i=0;i<sum;i++)

　　document.body.innerHTML+="<img src='"+imgs[i].src+"'>"

　　}

　　if (document.images){

　　imgs[0]=new Image()

　　imgs[1]=new Image()

　　imgs[2]=new Image()

　　imgs[3]=new Image()

　　imgs[4]=new Image()

　　imgs[5]=new Image()

　　imgs[6]=new Image()

　　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>

　　<body>

　　sum=l=imgs.length;

　　for (var i=0;i<l;i++){

　　imgs[i].onload=chk;

　　imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法

　　}

　　</script>

　　</body>

教程首页更多教程