JS 비이미지 동적 로딩 효과 구현 code_javascript 기술-JS 튜토리얼-php.cn
JS 비이미지 동적 로딩 효과 구현 code_javascript 기술 WBOY 원래의
2016-05-16 18:30:05 1441검색
代码如下: 首先实现该功能的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 = "..."; }, 로드 중: 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; } }, 시작: function() { document.getElementById(this.spanId).innerHTML = this.spanMsg this.initPointMsg; var callObj = this; this.intervalID = setInterval(function() { callObj.Loading(); }, this.timespan); }, 끝: function() { document.getElementById(this.spanId).innerHTML = ""; clearInterval(this.intervalID); } }
关键点:
如果把
var callObj = this; this.intervalID = setInterval(function() { callObj.Loading(); }, this.timespan);
写成:
이것 .intervalID = setInterval(this.Loading, this.timespan);
이것은 this.spanMsg의 설정입니다.
이것은 this.spanMsg의 Loading 방식입니다.象。 windows.setInterval嘛。
代码如下: <본문>
来源于prototype.js里经典创建Js对象的
复system代码
代码如下: var Class = { create: function() { return function() { this.init.apply(this,arguments); } } }
var LoadingMsg = Class.create(); class.create()의 时候做了2件事,1个是创建了LoadingMsg의 对象,即var LoadingMsg = function() {}; 외부 일사调用LoadingMsg의 초기화 방법, 初始化LoadingMsgori的静态私有变weight, 如果函数数数更喜欢简单朴实的女孩子的话,也可以改写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 = "..."; }, 로드 중: 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; } }, 시작: 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); }, 끝: function() { document.getElementById(this.spanId).innerHTML = ""; clearInterval(this.intervalID); } }
동일하지 않은 시작 시작 시작
从면向对象的习惯上来说,我个人还是倾向第一种写법, 에서实例化对象的时候即传入参数,而不是执行对象방법의 时候传入 另외부关于setInterval 방법을 사용하여 如果参数是简单的string,可以 setInterval("DisplayXYZ('xyz')",1000); 如果参数是对象, 则可以setInterval(function(){DisplayXYZ(obj);},1000);
LoadingMsg还是는 Ajax中에서 应用于执行时间可能较长的场景, 发送请求后loadingMsgObj.Start(), 成功获取响应时loadingMsgObj에서 사용됩니다. .끝()。
성명: 본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.