提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

JS非图片动态loading效果实现代码

JS代码 实现 图片 动态 效果 loading
2023-06-13 09:14:17 时间
代码如下：
首先实现该功能的js对象LoadingMsg：
复制代码代码如下:

varClass={
create:function(){
returnfunction(){this.init.apply(this,arguments);}
}
}
varLoadingMsg=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(){
varmaxLength=this.spanMsg.length+this.pointNum;
varcurrentSpanMsg=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;
varcallObj=this;
this.intervalID=setInterval(function(){callObj.Loading();},this.timespan);
},
End:function(){
document.getElementById(this.spanId).innerHTML="";
clearInterval(this.intervalID);
}
}

关键点：
如果把
复制代码代码如下:

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

写成：
复制代码代码如下:
this.intervalID=setInterval(this.Loading,this.timespan);

在执行Loading方法时则会报找不到this.spanMsg的错误。
因为在setInterval里的第一个参数里的this是windows对象，而不是LoadingMsg对象。windows.setInterval嘛。
应用该方法：
复制代码代码如下:
<body>
<inputtype="button"value="Start"onclick="javascript:StartLoading();"/>
<spanid="spanId"style="color:Red"></span>
<br/>
<inputtype="button"value="End"onclick="javascript:EndLoading();"/>
<br/><br/>
<scripttype="text/javascript">
varloadingMsgObj=newLoadingMsg("spanId","loading");
functionStartLoading(){
loadingMsgObj.Start();
}
functionEndLoading(){
loadingMsgObj.End();
}
</script>
</body>

来源于prototype.js里经典创建Js对象的
复制代码代码如下:
varClass={
create:function(){
returnfunction(){this.init.apply(this,arguments);}
}
}
varLoadingMsg=Class.create();

在Class.create()的时候做了2件事，1个是创建了LoadingMsg的对象，即varLoadingMsg=function(){}；
另外一件事就是调用LoadingMsg的init方法，初始化LoadingMsg里的静态私有变量，相当于c#里的构造函数作用。
如果你觉得这很装逼的话，如果你更喜欢简单朴实的女孩子的话，也可以改写LoadingMsg对象：
复制代码代码如下:
varLoadingMsg=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(){
varmaxLength=this.spanMsg.length+this.pointNum;
varcurrentSpanMsg=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;
varcallObj=this;
this.intervalID=setInterval(function(){callObj.Loading();},this.timespan);
},
End:function(){
document.getElementById(this.spanId).innerHTML="";
clearInterval(this.intervalID);
}
}

所不同的是把init的过程调到Start时执行，因此调用的时候也就变成了
复制代码代码如下:
　　varloadingMsgObj=newLoadingMsg();
functionStartLoading(){
　　loadingMsgObj.Start("spanId","loading");
}

从面向对象的习惯上来说，我个人还是倾向第一种写法，在实例化对象的时候即传入参数，而不是执行对象方法的时候传入参数。
另外关于setInterval方法传参数时，如果参数是简单的string，可以
setInterval("DisplayXYZ("xyz")",1000);
如果参数是对象，
则可以setInterval(function(){DisplayXYZ(obj);},1000);
LoadingMsg还是主要用在Ajax中，应用于执行时间可能较长的场景，在发送请求后loadingMsgObj.Start()，在成功获取响应时loadingMsgObj.End()。

相关文章