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 += ""; 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 < 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); } 图片加载进度实时显示 复制代码 代码如下: 您可能感兴趣的文章: javascript 进度条的几种方法 js实现进度条的方法 JavaScript实现网页加载进度条代码超简单 js 进度条实现代码 JS实现环形进度条（从0到100%）效果 Javascript jquery css 写的简单进度条控件 用CSS+JS实现的进度条效果效果 js实现音频控制进度条功能 JavaScript实现水平进度条拖拽效果 JavaScript实现带粒子效果的进度条