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 相关文章推荐
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 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的网址
2006/11/25 PHP
php中的常用魔术方法总结
2013/08/02 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
python中assert用法实例分析
2015/04/30 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python库matplotlib绘制坐标图
2019/10/18 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
给民警的表扬信
2014/01/08 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
党员自我对照检查材料
2014/08/19 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
教育合作协议范本
2014/10/17 职场文书
出国留学英文自荐信
2015/03/25 职场文书
贷款工作证明模板
2015/06/12 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript