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


Posted in Javascript onApril 09, 2010

代码如下:
首先实现该功能的js对象LoadingMsg:

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); 
} 
}

关键点:
如果把
var callObj = 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> 
<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里经典创建Js对象的
var Class = { 
create: function() { 
return function() { this.init.apply(this,arguments); } 
} 
} 
var LoadingMsg = Class.create();

在Class.create()的时候做了2件事,1个是创建了LoadingMsg的对象,即var LoadingMsg = function() {};
另外一件事就是调用LoadingMsg的init方法,初始化LoadingMsg里的静态私有变量,相当于c#里的构造函数作用。
如果你觉得这很装逼的话,如果你更喜欢简单朴实的女孩子的话,也可以改写LoadingMsg对象:
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的过程调到Start时执行,因此调用的时候也就变成了
var loadingMsgObj = new LoadingMsg(); 
function StartLoading() { 

loadingMsgObj.Start("spanId", "loading"); 
}

从面向对象的习惯上来说,我个人还是倾向第一种写法,在实例化对象的时候即传入参数,而不是执行对象方法的时候传入参数。
另外关于setInterval方法传参数时,如果参数是简单的string,可以
setInterval("DisplayXYZ('xyz')",1000);
如果参数是对象,
则可以setInterval(function(){DisplayXYZ(obj);},1000);
LoadingMsg还是主要用在Ajax中,应用于执行时间可能较长的场景,在发送请求后loadingMsgObj.Start(),在成功获取响应时loadingMsgObj.End()。
Javascript 相关文章推荐
javascript function调用时的参数检测常用办法
Feb 26 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
java必学必会之static关键字
Dec 03 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
extJs 下拉框联动实现代码
Apr 09 #Javascript
禁止js文件缓存的代码
Apr 09 #Javascript
javascript+mapbar实现地图定位
Apr 09 #Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 #Javascript
Javascript string 扩展库代码
Apr 09 #Javascript
JavaScript 设计模式之组合模式解析
Apr 09 #Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 #Javascript
You might like
再次研究下cache_lite
2007/02/14 PHP
php 缩略图实现函数代码
2011/06/23 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python实现字典依据value排序
2016/02/24 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python装饰器原理与用法分析
2018/04/30 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
Python requests获取网页常用方法解析
2020/02/20 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
学校经典推荐信
2013/10/30 职场文书
小学毕业家长寄语
2014/01/19 职场文书
人事任命书范文
2014/06/04 职场文书
2015年公司新年寄语
2014/12/08 职场文书
护士2015年终工作总结
2015/04/29 职场文书
MySQL Router的安装部署
2021/04/24 MySQL