JS 進(jìn)度條效果實(shí)現(xiàn)代碼整理
更新時(shí)間：2011年05月21日 18:09:36 作者：
進(jìn)度條效果實(shí)現(xiàn)代碼,有助于緩解頁面顯示慢的頁面，給用戶一個(gè)等待時(shí)間的效果
第一種方法:
Loading.js
//頻率
var frequency = 50;
//步長
var step = 3;
//背景顏色
var loadingBgcolor = "#ffffff";
//寬度
var loadingWidth = 354;
/*
*參數(shù)說明:
*content：顯示內(nèi)容，可以為空；
*imageURL：將引用JS文件的路徑設(shè)置即可；
*left：進(jìn)度條顯示位置left
*top：進(jìn)度條顯示位置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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="LoadingJS/Loading.js" type="text/javascript"></script>
</head>
<body>
<input type="button" name="Button" value="Button" onclick="Loading('顯示標(biāo)簽內(nèi)容', 'LoadingJS/', 20, 100)">
<div id="loading_div" ></div>
</body>
</html>
第二種方法：
JS實(shí)現(xiàn)進(jìn)度顯示功能
progress.js類文件：
$ = function (id) {
return document.getElementById(id);
}
//文本轉(zhuǎn)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;
};
//進(jìn)度條類
function Progress(objId) {
//window.setInterval對象
this.interval = null;
//進(jìn)度條對象ID
this.id = objId;
//當(dāng)前進(jìn)度 起始進(jìn)度為0
this.progress = 0;
//進(jìn)度條顯示進(jìn)度的DIV ID
this.progressId = inner + this.id;
//進(jìn)度條邊框ID
this.progressFrameId = frame + this.id;
//進(jìn)度條類參數(shù)配置
this.config = {
//寬度
width: 150,
//高度
height: 20,
//左邊距
left: 0,
//頂部邊距
top: 0,
//進(jìn)度顏色
progressColor: red,
//邊框顏色
borderColor: #ccc,
//邊框?qū)挾?
borderHeight: 2,
//進(jìn)度完成后間隔N秒后隱藏進(jìn)度條 0為立即隱藏
hiddenSplit:2000
};
}
//進(jìn)度條類初始化方法
Progress.prototype.init = function () {
//新建進(jìn)度條邊框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
);
//重置進(jìn)度為0
this.progress = 0;
//設(shè)置邊框ID
progressdiv.id = this.progressFrameId;
//設(shè)置邊框樣式
progressdiv.style.cssText = progressdiv_css_text;
//設(shè)置進(jìn)度條HTML
progressdiv.innerHTML = '
'.format(this.progressId, this.config.height, this.config.progressColor);
//加入body中
document.body.appendChild(progressdiv);
};
//進(jìn)度條隱藏函數(shù)
Progress.prototype.hiddenProgress = function () {
document.body.removeChild(document.getElementById(this.progressFrameId));
window.clearInterval(this.interval);
}
//進(jìn)度結(jié)束時(shí)觸發(fā)的函數(shù)
Progress.prototype.complete = function () {
window.clearInterval(this.interval);
this.interval = window.setTimeout(this.id+.hiddenProgress();,this.config.hiddenSplit);
if (this.completeCallBack) {
this.completeCallBack();
}
}
//進(jìn)度每次運(yùn)行后的回調(diào)函數(shù)
Progress.prototype.callback = function () {
var progressDiv = document.getElementById(this.progressId);
var progressFrameDiv = document.getElementById(this.progressFrameId);
progressDiv.innerHTML = (this.progress*100)+ %;
progressFrameDiv.title = 上傳進(jìn)度: + (this.progress*100) + %;
progressDiv.style.width = (this.progress*100) + %;
if (this.progress >= 1) {
this.complete();
progressDiv.innerHTML = 文件上傳成功!;
}
}
//進(jìn)度條運(yùn)行函數(shù)。需要用戶自己實(shí)現(xiàn)
Progress.prototype.run = function () {
alert(請實(shí)現(xiàn) + this.id + .run方法以實(shí)現(xiàn)異步進(jìn)度請求，回發(fā)回請調(diào)回調(diào) + this.id + .callback方法。);
window.clearInterval(this.interval);
}
//啟動(dòng)進(jìn)度
Progress.prototype.start = function () {
this.init();
this.interval = window.setInterval(this.id + .run(), 1000);
}
圖片加載進(jìn)度實(shí)時(shí)顯示
<script>
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>
<div id="aa">0%</div>
<script>
sum=l=imgs.length;
for (var i=0;i<l;i++){
imgs[i].onload=chk;
imgs[i].onerror=chk;//無論圖片是否加載成功，都執(zhí)行指定方法
}
</script>
</body>
Loading.js
復(fù)制代碼 代碼如下:
//頻率
var frequency = 50;
//步長
var step = 3;
//背景顏色
var loadingBgcolor = "#ffffff";
//寬度
var loadingWidth = 354;
/*
*參數(shù)說明:
*content：顯示內(nèi)容，可以為空；
*imageURL：將引用JS文件的路徑設(shè)置即可；
*left：進(jìn)度條顯示位置left
*top：進(jìn)度條顯示位置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;
}
使用頁:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="LoadingJS/Loading.js" type="text/javascript"></script>
</head>
<body>
<input type="button" name="Button" value="Button" onclick="Loading('顯示標(biāo)簽內(nèi)容', 'LoadingJS/', 20, 100)">
<div id="loading_div" ></div>
</body>
</html>
第二種方法：
JS實(shí)現(xiàn)進(jìn)度顯示功能
復(fù)制代碼 代碼如下:
progress.js類文件：
$ = function (id) {
return document.getElementById(id);
}
//文本轉(zhuǎn)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;
};
//進(jìn)度條類
function Progress(objId) {
//window.setInterval對象
this.interval = null;
//進(jìn)度條對象ID
this.id = objId;
//當(dāng)前進(jìn)度 起始進(jìn)度為0
this.progress = 0;
//進(jìn)度條顯示進(jìn)度的DIV ID
this.progressId = inner + this.id;
//進(jìn)度條邊框ID
this.progressFrameId = frame + this.id;
//進(jìn)度條類參數(shù)配置
this.config = {
//寬度
width: 150,
//高度
height: 20,
//左邊距
left: 0,
//頂部邊距
top: 0,
//進(jìn)度顏色
progressColor: red,
//邊框顏色
borderColor: #ccc,
//邊框?qū)挾?
borderHeight: 2,
//進(jìn)度完成后間隔N秒后隱藏進(jìn)度條 0為立即隱藏
hiddenSplit:2000
};
}
//進(jìn)度條類初始化方法
Progress.prototype.init = function () {
//新建進(jìn)度條邊框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
);
//重置進(jìn)度為0
this.progress = 0;
//設(shè)置邊框ID
progressdiv.id = this.progressFrameId;
//設(shè)置邊框樣式
progressdiv.style.cssText = progressdiv_css_text;
//設(shè)置進(jìn)度條HTML
progressdiv.innerHTML = '
'.format(this.progressId, this.config.height, this.config.progressColor);
//加入body中
document.body.appendChild(progressdiv);
};
//進(jìn)度條隱藏函數(shù)
Progress.prototype.hiddenProgress = function () {
document.body.removeChild(document.getElementById(this.progressFrameId));
window.clearInterval(this.interval);
}
//進(jìn)度結(jié)束時(shí)觸發(fā)的函數(shù)
Progress.prototype.complete = function () {
window.clearInterval(this.interval);
this.interval = window.setTimeout(this.id+.hiddenProgress();,this.config.hiddenSplit);
if (this.completeCallBack) {
this.completeCallBack();
}
}
//進(jìn)度每次運(yùn)行后的回調(diào)函數(shù)
Progress.prototype.callback = function () {
var progressDiv = document.getElementById(this.progressId);
var progressFrameDiv = document.getElementById(this.progressFrameId);
progressDiv.innerHTML = (this.progress*100)+ %;
progressFrameDiv.title = 上傳進(jìn)度: + (this.progress*100) + %;
progressDiv.style.width = (this.progress*100) + %;
if (this.progress >= 1) {
this.complete();
progressDiv.innerHTML = 文件上傳成功!;
}
}
//進(jìn)度條運(yùn)行函數(shù)。需要用戶自己實(shí)現(xiàn)
Progress.prototype.run = function () {
alert(請實(shí)現(xiàn) + this.id + .run方法以實(shí)現(xiàn)異步進(jìn)度請求，回發(fā)回請調(diào)回調(diào) + this.id + .callback方法。);
window.clearInterval(this.interval);
}
//啟動(dòng)進(jìn)度
Progress.prototype.start = function () {
this.init();
this.interval = window.setInterval(this.id + .run(), 1000);
}
圖片加載進(jìn)度實(shí)時(shí)顯示
復(fù)制代碼 代碼如下:
<script>
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>
<div id="aa">0%</div>
<script>
sum=l=imgs.length;
for (var i=0;i<l;i++){
imgs[i].onload=chk;
imgs[i].onerror=chk;//無論圖片是否加載成功，都執(zhí)行指定方法
}
</script>
</body>
您可能感興趣的文章:
- javascript 進(jìn)度條的幾種方法
- js實(shí)現(xiàn)進(jìn)度條的方法
- JavaScript實(shí)現(xiàn)網(wǎng)頁加載進(jìn)度條代碼超簡單
- js 進(jìn)度條實(shí)現(xiàn)代碼
- JS實(shí)現(xiàn)環(huán)形進(jìn)度條（從0到100%）效果
- Javascript jquery css 寫的簡單進(jìn)度條控件
- 用CSS+JS實(shí)現(xiàn)的進(jìn)度條效果效果
- js實(shí)現(xiàn)音頻控制進(jìn)度條功能
- JavaScript實(shí)現(xiàn)水平進(jìn)度條拖拽效果
- JavaScript實(shí)現(xiàn)帶粒子效果的進(jìn)度條
相關(guān)文章
在做數(shù)據(jù)交互的時(shí)候,我們經(jīng)常需要判斷數(shù)據(jù)或者對象是不是為空,避免當(dāng)接口異常時(shí)候前端頁面崩潰,下面這篇文章主要給大家介紹了關(guān)于JS判斷空對象的幾個(gè)方法,需要的朋友可以參考下2022-02-02
javascript 動(dòng)態(tài)添加事件代碼
往往我們需要在 JS 中動(dòng)態(tài)添加事件，這就涉及到瀏覽器兼容性問題了，以下談及的幾種方法，我們也常常混合使用。2008-11-11
淺談JS 數(shù)字和字符串之間相互轉(zhuǎn)化的糾紛
下面小編就為大家?guī)硪黄獪\談JS 數(shù)字和字符串之間相互轉(zhuǎn)化的糾紛。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
js實(shí)現(xiàn)兼容IE和FF的上下層的移動(dòng)
本來是很簡單的一個(gè)功能，可是一開始弄的時(shí)候，還有IE能實(shí)現(xiàn)，F(xiàn)F總是不能實(shí)現(xiàn)，在網(wǎng)上看了半天，也沒弄出個(gè)所以然，所以在同事的幫忙下，總算弄出來了，瀏覽器的兼容性考的還是細(xì)節(jié)上面的東西，所有關(guān)于細(xì)節(jié)的，我會用注釋標(biāo)出來的。2015-05-05
這篇文章主要介紹了微信小程序加載機(jī)制及運(yùn)行機(jī)制圖解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
js統(tǒng)計(jì)頁面的來訪次數(shù)實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用js統(tǒng)計(jì)頁面的來訪次數(shù),需要的朋友可以參考下2014-05-05
JS特權(quán)方法定義作用以及與公有方法的區(qū)別
在構(gòu)造函數(shù)內(nèi)部通過this關(guān)鍵字定義的的方法為特權(quán)方法它的作用為在構(gòu)造函數(shù)外面公開訪問(僅限于實(shí)例化的對象)，而且還能夠訪問私有成員和方法，感興趣的你可以參考下哈2013-03-03
JS實(shí)現(xiàn)側(cè)懸浮浮動(dòng)實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)側(cè)懸浮浮動(dòng)實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了解決前端跨域問題8種方案的相關(guān)資料,需要的朋友可以參考下2016-11-11
給超鏈接添加特效鼠標(biāo)移動(dòng)展示提示信息且隨鼠標(biāo)移動(dòng)
需要實(shí)現(xiàn)這樣的效果，就是給超鏈接添加特效當(dāng)鼠標(biāo)移動(dòng)到上展示提示信息且提示信息跟隨鼠標(biāo)移動(dòng)，經(jīng)測試還不錯(cuò)，感興趣的朋友可以參考下2013-10-10