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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 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
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
php类常量用法实例分析
2015/07/09 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python入门之井字棋小游戏
2020/03/05 Python
pycharm安装及如何导入numpy
2020/04/03 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
材料物理专业个人求职信
2013/12/15 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
门面房租房协议书
2014/12/01 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python