快捷導(dǎo)航

JS 非圖片動態(tài)loading效果實現(xiàn)代碼

更新時間：2010年04月09日 13:34:08 作者：

功能說明：譬如在按某個button時，顯示消息"Loading”，然后每隔一秒后后面加上"."，至一定數(shù)量的"."時如："Loading..."，再重置此消息為"Loading"，繼續(xù)動態(tài)顯示，直至按鈕事件處理完成。

代碼如下：
首先實現(xiàn)該功能的js對象LoadingMsg：

復(fù)制代碼代碼如下:

 
var Class = { 
create: function() { 
return function() { this.init.apply(this,arguments); } 
} 
} 
var LoadingMsg = Class.create(); 
LoadingMsg.prototype = { 
init: function(spanId, spanMsg) { 
this.intervalID = -10000; 
this.spanId = spanId; 
this.spanMsg = spanMsg; 
this.timespan = 1000; 
this.pointNum = 3; 
this.initPointMsg = "..."; 
}, 
Loading: function() { 
var maxLength = this.spanMsg.length + this.pointNum; 
var currentSpanMsg = document.getElementById(this.spanId).innerHTML; 
if (currentSpanMsg.length < maxLength) { 
document.getElementById(this.spanId).innerHTML += "."; 
} 
else { 
document.getElementById(this.spanId).innerHTML = this.spanMsg; 
} 
}, 
Start: function() { 
document.getElementById(this.spanId).innerHTML = this.spanMsg + this.initPointMsg; 
var callObj = this; 
this.intervalID = setInterval(function() { callObj.Loading(); }, this.timespan); 
}, 
End: function() { 
document.getElementById(this.spanId).innerHTML = ""; 
clearInterval(this.intervalID); 
} 
} 

關(guān)鍵點：
如果把

復(fù)制代碼代碼如下:

 
var callObj = this; 
this.intervalID = setInterval(function() { callObj.Loading(); }, this.timespan); 

寫成：

復(fù)制代碼代碼如下:

this.intervalID = setInterval(this.Loading, this.timespan);

在執(zhí)行Loading方法時則會報找不到this.spanMsg的錯誤。
因為在setInterval里的第一個參數(shù)里的this是windows對象，而不是LoadingMsg對象。windows.setInterval嘛。
應(yīng)用該方法：

復(fù)制代碼代碼如下:

 
<body> 
<input type="button" value="Start" onclick="javascript:StartLoading();" /> 
<span id="spanId" style="color:Red"></span> 
<br /> 
<input type="button" value="End" onclick="javascript:EndLoading();" /> 
<br /><br /> 
<script type="text/javascript"> 
var loadingMsgObj = new LoadingMsg("spanId","loading"); 
function StartLoading() { 
loadingMsgObj.Start(); 
} 
function EndLoading() { 
loadingMsgObj.End(); 
} 
</script> 
</body> 

來源于prototype.js里經(jīng)典創(chuàng)建Js對象的

復(fù)制代碼代碼如下:

 
var Class = { 
create: function() { 
return function() { this.init.apply(this,arguments); } 
} 
} 
var LoadingMsg = Class.create(); 

在Class.create()的時候做了2件事，1個是創(chuàng)建了LoadingMsg的對象，即var LoadingMsg = function() {}；
另外一件事就是調(diào)用LoadingMsg的init方法，初始化LoadingMsg里的靜態(tài)私有變量，相當(dāng)于c#里的構(gòu)造函數(shù)作用。
如果你覺得這很裝逼的話，如果你更喜歡簡單樸實的女孩子的話，也可以改寫LoadingMsg對象：

復(fù)制代碼代碼如下:

 
var LoadingMsg = function() { }; 
LoadingMsg.prototype = { 
init: function(spanId, spanMsg) { 
this.intervalID = -10000; 
this.spanId = spanId; 
this.spanMsg = spanMsg; 
this.timespan = 1000; 
this.pointNum = 3; 
this.initPointMsg = "..."; 
}, 
Loading: function() { 
var maxLength = this.spanMsg.length + this.pointNum; 
var currentSpanMsg = document.getElementById(this.spanId).innerHTML; 
if (currentSpanMsg.length < maxLength) { 
document.getElementById(this.spanId).innerHTML += "."; 
} 
else { 
document.getElementById(this.spanId).innerHTML = this.spanMsg; 
} 
}, 
Start: function(spanId, spanMsg) { 
this.init(spanId, spanMsg); 
document.getElementById(this.spanId).innerHTML = this.spanMsg + this.initPointMsg; 
var callObj = this; 
this.intervalID = setInterval(function() { callObj.Loading(); }, this.timespan); 
}, 
End: function() { 
document.getElementById(this.spanId).innerHTML = ""; 
clearInterval(this.intervalID); 
} 
} 

所不同的是把init的過程調(diào)到Start時執(zhí)行，因此調(diào)用的時候也就變成了

復(fù)制代碼代碼如下:

 
　　 var loadingMsgObj = new LoadingMsg(); 
function StartLoading() { 
　　loadingMsgObj.Start("spanId", "loading"); 
} 

從面向?qū)ο蟮牧?xí)慣上來說，我個人還是傾向第一種寫法，在實例化對象的時候即傳入?yún)?shù)，而不是執(zhí)行對象方法的時候傳入?yún)?shù)。
另外關(guān)于setInterval方法傳參數(shù)時，如果參數(shù)是簡單的string，可以
setInterval("DisplayXYZ('xyz')",1000);
如果參數(shù)是對象，
則可以setInterval(function(){DisplayXYZ(obj);},1000);
LoadingMsg還是主要用在Ajax中，應(yīng)用于執(zhí)行時間可能較長的場景，在發(fā)送請求后loadingMsgObj.Start()，在成功獲取響應(yīng)時loadingMsgObj.End()。

您可能感興趣的文章: