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 相关文章推荐
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
JS定时器实例详细分析
Oct 11 Javascript
浅析javascript 定时器
Dec 23 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
js文字横向滚动特效
Nov 11 Javascript
详解Javascript继承的实现
Mar 25 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
详解angular2 控制视图的封装模式
Dec 27 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
PHP中的Memcache详解
2014/04/05 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
基于jquery的表格排序
2010/09/11 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python中str.format()详解
2017/03/12 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
jupyter notebook 重装教程
2020/04/16 Python
如何真正的了解python装饰器
2020/08/14 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
params有什么用
2016/03/01 面试题
网上书店创业计划书
2014/01/12 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript