>

跑马灯抽奖活动,JavaScript完结跑马灯抽奖活动实

- 编辑:正版管家婆马报彩图 -

跑马灯抽奖活动,JavaScript完结跑马灯抽奖活动实

在上篇小说给我们介绍了JavaScript落到实处跑马灯抽取奖金活动实例代码深入分析与优化(一),既然是要编写制定插件。那么叫做“插件”的事物自然是具有的一些特征能够满足大家一贯支出的急需如故是进步我们的付出作用。那么叫做插件的东西应该负有哪些基本特征呢?让我们来总计一下:

JavaScript贯彻跑马灯抽取奖金活动实例代码深入分析与优化(二),跑马灯抽取奖品活动

在上篇文章给大家介绍了JavaScript完结跑马灯抽奖活动实例代码剖判与优化(一),既然是要编写插件。那么叫做“插件”的东西自然是独具的少数特征能够满意我们一向成本的需要照旧是提高大家的付出功用。那么叫做插件的东西应该具有怎么样基本特征呢?让我们来总计一下:

1.JavaScript 插件一些基本特征:

配备一定要轻便
插件中定义的变量不传染全局变量;
同一段代码能够在分裂的地点复用;
客商可以自定义本人遵从参数;
享有销毁变量和参数的意义;
设若依据以上的几个特色来写插件的话,我们得以计算出多个骨干的代码结构,大家一个一个的来看:

1.插件配置要硬着头皮的差相当少

html中布局容器节点

//这里的node-type="reward-area" 是标识我们插件的容器节点
<div class="re-area" node-type="reward-area" >

DOM加载成功以往先河化插件

$(function() {
//这里的 test 是代表容器的 class
window.LightRotate.init($('[node-type=reward-area]'));
});

2.插件中定义的变量不污染全局变量

JavaScript 具备块级功用域的标志符正是function了。那大家怎么注解我们的变量才得以使它不传染全局变量呢?
此地大家需求运用的三个 JavaScript 函数的自实行的知识点。代码如下:

(function(){
// do something
})();

3.在不一致的地点复用作用代码

那将在动用大家面向对象的知识点,把咱们的意义代码抽象成靶子,在大家需求利用的时候,实例化对象就足以了。那咱们随后第二部的代码继续写,

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// do something
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

4.顾客能够自定义功用参数

率先大家应该有暗许的参数设定,比如下边那样

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// 自定义的参数
this.setting = {
liAutoPlay: false, //周围的灯是否自动旋转
roLiSpeed: 100, //灯旋转的速度ms
roPrSpeed: 200, //奖品旋转速度ms
liDirection: true, //旋转方向 true 正方向 false 反方向
randomPrize: false //空格是否随机选取
};
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

实在这么写的话,使用者已经得以修改咱们的 JavaScript 文件来产生自定义了。但是为了能够让大家的价格差异足够的好用,比如说,我们的使用者一点儿都不懂 js 呢?该如何是好?
如此大家得以把那些参数用自定义属性配置在 html中,如下:

<div class="re-area" node-type="reward-area" data-setting='{
"liAutoPlay":false,
"roLiSpeed":100,
"roPrSpeed":200,
"liDirection":true,
"randomPrize":false}'>

这么顾客只须求在 html的节点中就足以安顿当前容器运营的参数。那样的裨益还是能够使同一页面上的不等容器,能够单独的布署参数,裁减耦合。

那正是说在 js 中大家该怎么获取那个参数呢?在上头的代码中,已经有了职能对象函数。那么大家想增添对象方法来猎取客商的自定义参数,怎么办呢?大家一般选用prototype的事物来扩展我们已有指标的主意,代码如下:

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// 自定义的参数
this.setting = {
liAutoPlay: false, //周围的灯是否自动旋转
roLiSpeed: 100, //灯旋转的速度ms
roPrSpeed: 200, //奖品旋转速度ms
liDirection: true, //旋转方向 true 正方向 false 反方向
randomPrize: false //空格是否随机选取
};
//这里调用对象的获取用户自定义参数的方法,并且将默认参数合并
$.extend(_this.setting, _this.getSettingUser());
};
LightRotate.prototype = {
//扩展获取用户自定义参数的方法
getSettingUser: function () {
var userSetting = this.LightArea.attr('data-setting');
if (userSetting && userSetting !== '') {
return $.parseJSON(userSetting);
} else {
return {};
}
}
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

5.销毁变量和参数的功力;

最后八个就是大家的插件应该负有销毁自己变量和参数的成效。大家该怎么写吧?依然在地点的代码基础上一连扩陈富海能对象的可调用艺术,代码如下:

LightRotate.prototype = {
//扩展获取用户自定义参数的方法
getSettingUser: function () {
var userSetting = this.LightArea.attr('data-setting');
if (userSetting && userSetting !== '') {
return $.parseJSON(userSetting);
} else {
return {};
}
},
//销毁对象参数
destory: function () {
$(_this.LightArea).off();
this.closeAnimation();
this.rewardTimer = null;
}
};

由上述大家的剧情我们得以大意精晓了一个成熟的插件应该负有的基本功能。

2.插件开辟和优化示例

刚好那几个项目是在年节放假前的一个火急的品种,当时为了赶进程就从不详细思索自身的代码结构,这样野味自个儿的一连优化提供了空子。

由上一节介绍的电磁料理计时器的原委能够知晓 JavaScript 是单线程的。所以

假诺一段代码运营功效异常的低,就能潜移暗化接二连三代码的实施。所以对于 JavaScript ,代码优化是必得的。
先来探视大家的“跑马灯”插件应该具备何样成效:

可见调节灯是或不是自动播放;
灯的团团转方向能够决定;
灯的旋转速度能够调控;
奖状的团团转速度能够决定;
此地就不详细的牵线这个效率点的费用进度,仅仅介绍优化进度。借使有意思味能够看本人文章最终附上的源代码地址,实行下载阅读。

1.“顺序”获取旋转灯代码的优化

因为周边的灯笔者是利用相对化定位来做的,所以本身须要“顺序”的获得他们的列表,然后操作。

第一获得 DOM节点。

//获取外围的灯,可以看到我这里使用的选择器多了一个 select,是为了获取当前容器下的某些元素,避免有多个容器存在时冲突
this.topLight = $('[node-type=re-top]', select).find('span');
this.rightLight = $('[node-type=re-right]', select).find('span');
this.bottomLight = $('[node-type=re-bottom]', select).find('span');
this.leftLight = $('[node-type=re-left]', select).find('span');

然后就应该“顺序”的获得“灯”节点的 DOM 成分列表。

作者的首先版是如此做的:

Zepto(topLight).each(function() {
lightList.push(this);
});
Zepto(rightLight).each(function() {
lightList.push(this);
});
for (var j = bottomLight.length - 1; j >= 0; j--) {
lightList.push(bottomLight[j]);
}
for (var m = leftLight.length - 1; m >= 0; m--) {
lightList.push(leftLight[m]);
}

因为“下”和“左”方向的灯是须要倒序的,所以作者使用了三个倒序的 for循环,其实当循环现身的时候,大家都应该思索大家的代码是不是有可优化的空间。

优化后的代码是这样子的,在此地自个儿压缩了4次巡回的使用

function () {
var lightList = [];
var bottomRever;
var leftRever;
bottomRever = Array.from(this.bottomLight).reverse();
leftRever = Array.from(this.leftLight).reverse();
lightList = Array.from(this.topLight).concat(Array.from(this.rightLight));
lightList = lightList.concat(bottomRever);
lightList = lightList.concat(leftRever);
}

列表倒序小编动用了原生 Array对象的reverse方法。

2.应用“闭包”优化顺序循环播

为了能够使大家的“灯”顺序的跑起来,第一版的思路是:

给每三个“灯”(注意,这里是每一个,罪过…罪过…)定义一个set提姆eout(),实行时间便是数序的踏向js 实行队列中去。
代码是上边那标准的:

var zepto_light = Zepto(lightList);
var changeTime = 100;
var lightLength = zepto_light.length;
var totleTime = changeTime * lightLength;
function lightOpen() {
for (var i = 0; i < lightLength; i++) {
(function temp(i) {
lightTimer = setTimeout(function() {
if (stopAnimation === false) {
Zepto(zepto_light).removeClass('light_open');
Zepto(zepto_light[i]).addClass("light_open");
} else {
return;
}
}, changeTime * i);
})(i);
}
}

如此子写的久治不愈的病痛很显眼:假设本人有玖十多个“灯”那么就能在当下的 js 推行队列中加入一百个setTimeout(),再一次重申的是本身这里又接纳了for循环,在岁月复杂度上又加多了。代码的试行作用又收缩了。

新生思维了下,JavaScript 中“闭包”符合本人当下的采取处境,就想着用闭包优化一下,优化后代码如下:

lightRun: function () {
var _this = this;
function tempFunc() {
var lightList = _this.getLightList();
var lightLength = lightList.length;
var i = 0;
return function () {
$(lightList, _this.LightArea).removeClass('light_open');
$(lightList[i], _this.LightArea).addClass("light_open");
i++;
//使一轮循环结束后能够继续下次循环
if (i === lightLength) {
i = 0;
}
};
}
var lightRunFunc = tempFunc();
lightRunFunc();
_this.lightInterVal = setInterval(lightRunFunc, _this.setting.roLiSpeed);
}

由上述的代码能够很料定的意识四个亮点:第一,正是缩减了 for循环的使用,收缩了代码的年月复杂度,第二便是,每一回自己偏偏在当下代码实践的种类中开创二个setInterval()。减小了施行队列的复杂度。

至于JavaScript完成跑马灯抽取奖金活动实例代码解析与优化(二)的有关知识就给大家介绍到那边,希望本文所述对大家有着帮忙。

1.JavaScript 插件一些基本特征:

您大概感兴趣的稿子:

  • javascript 单行文字向上跑马灯滚动突显
  • javascript跑马灯悬停放大职能落到实处代码
  • js跑马灯代码(自写)
  • js文本框走动跑马灯效果代码共享
  • JS落成情况栏跑马灯文字效果代码
  • javascript跑马灯抽取奖品实例讲解
  • JavaScript完成跑马灯抽取奖品活动实例代码解析与优化(一)

在上篇文章给大家介绍了JavaScript达成跑马灯抽奖活动实例代码解...

布局必须要轻易
插件中定义的变量不传染全局变量;
一直以来段代码能够在不相同的地点复用;
客商能够自定义本身效劳参数;
有着销毁变量和参数的效果;
就算根据上述的多少个特点来写插件的话,大家得以总计出一个为主的代码结构,大家二个几个的来看:

1.插件配置要尽量的轻易

html中配备容器节点

//这里的node-type="reward-area" 是标识我们插件的容器节点
<div class="re-area" node-type="reward-area" >

DOM加载成功之后起先化插件

$(function() {
//这里的 test 是代表容器的 class
window.LightRotate.init($('[node-type=reward-area]'));
});

2.插件中定义的变量不传染全局变量

JavaScript 具有块级成效域的标记符正是function了。那大家怎么证明大家的变量能力够使它不污染全局变量呢?
那边大家须求运用的二个 JavaScript 函数的自实行的知识点。代码如下:

(function(){
// do something
})();

3.在差别的地方复用成效代码

这将在动用我们面向对象的知识点,把我们的成效代码抽象成靶子,在大家要求利用的时候,实例化对象就足以了。那大家跟着第二部的代码继续写,

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// do something
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

4.顾客能够自定义成效参数

先是大家应当有私下认可的参数设定,比如上边那样

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// 自定义的参数
this.setting = {
liAutoPlay: false, //周围的灯是否自动旋转
roLiSpeed: 100, //灯旋转的速度ms
roPrSpeed: 200, //奖品旋转速度ms
liDirection: true, //旋转方向 true 正方向 false 反方向
randomPrize: false //空格是否随机选取
};
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

其实那样写的话,使用者已经足以修改我们的 JavaScript 文件来成功自定义了。但是为了能够让我们的价格差别丰盛的好用,譬如说,大家的使用者一点儿都不懂 js 呢?该咋办?
那样我们能够把那个参数用自定义属性配置在 html中,如下:

<div class="re-area" node-type="reward-area" data-setting='{
"liAutoPlay":false,
"roLiSpeed":100,
"roPrSpeed":200,
"liDirection":true,
"randomPrize":false}'>

如此那般顾客只供给在 html的节点中就能够布置当前容器运营的参数。那样的好处还足以使同一页面上的不如容器,能够独立的配置参数,裁减耦合。

那么在 js 中大家该怎么获取那么些参数呢?在下边包车型地铁代码中,已经有了职能对象函数。那么大家想扩张对象方法来收获客户的自定义参数,如何做呢?大家一般接纳prototype的事物来扩展我们已有指标的秘籍,代码如下:

//
(function($){
// 创建功能对象
var LightRotate = function (select) {
// 自定义的参数
this.setting = {
liAutoPlay: false, //周围的灯是否自动旋转
roLiSpeed: 100, //灯旋转的速度ms
roPrSpeed: 200, //奖品旋转速度ms
liDirection: true, //旋转方向 true 正方向 false 反方向
randomPrize: false //空格是否随机选取
};
//这里调用对象的获取用户自定义参数的方法,并且将默认参数合并
$.extend(_this.setting, _this.getSettingUser());
};
LightRotate.prototype = {
//扩展获取用户自定义参数的方法
getSettingUser: function () {
var userSetting = this.LightArea.attr('data-setting');
if (userSetting && userSetting !== '') {
return $.parseJSON(userSetting);
} else {
return {};
}
}
};
LightRotate.init = function (select) {
var _this = this;
//根据不同的容器实例化不同的对象
select.each(function () {
new _this($(this));
});
};
window.LightRotate = LightRotate;
})(jQuery);

5.销毁变量和参数的成效;

最后三个正是大家的插件应该具有销毁本身变量和参数的功用。大家该怎么写啊?如故在下面的代码基础上此起彼落庞大成效对象的可调用艺术,代码如下:

LightRotate.prototype = {
//扩展获取用户自定义参数的方法
getSettingUser: function () {
var userSetting = this.LightArea.attr('data-setting');
if (userSetting && userSetting !== '') {
return $.parseJSON(userSetting);
} else {
return {};
}
},
//销毁对象参数
destory: function () {
$(_this.LightArea).off();
this.closeAnimation();
this.rewardTimer = null;
}
};

由以上大家的内容我们得以大概领会了多个老于世故的插件应该有所的基本功效。

2.插件开垦和优化示例

恰恰那个类型是在大年佳节放假前的贰个迫切的体系,当时为了赶进度就从不详细思念本人的代码结构,这样野味本身的持续优化提供了机缘。

由上一节介绍的电火花计时器的内容能够领略 JavaScript 是单线程的。所以

假定一段代码运转功能非常的低,就能影响再三再四代码的进行。所以对于 JavaScript ,代码优化是必需的。
先来看看大家的“跑马灯”插件应该有所何等职能:

可见调整灯是还是不是自动播放;
灯的转动方向可以垄断;
灯的团团转速度能够决定;
奖状的转动速度能够操纵;
此间就不详细的牵线那几个意义点的支付进程,仅仅介绍优化进度。假若有意思味能够看自身小说最后附上的源代码地址,实行下载阅读。

1.“顺序”获取旋转灯代码的优化

因为周边的灯小编是运用相对化定位来做的,所以本身要求“顺序”的获得他们的列表,然后操作。

第一取得 DOM节点。

//获取外围的灯,可以看到我这里使用的选择器多了一个 select,是为了获取当前容器下的某些元素,避免有多个容器存在时冲突
this.topLight = $('[node-type=re-top]', select).find('span');
this.rightLight = $('[node-type=re-right]', select).find('span');
this.bottomLight = $('[node-type=re-bottom]', select).find('span');
this.leftLight = $('[node-type=re-left]', select).find('span');

接下来就活该“顺序”的拿走“灯”节点的 DOM 成分列表。

自家的率先版是这么做的:

Zepto(topLight).each(function() {
lightList.push(this);
});
Zepto(rightLight).each(function() {
lightList.push(this);
});
for (var j = bottomLight.length - 1; j >= 0; j--) {
lightList.push(bottomLight[j]);
}
for (var m = leftLight.length - 1; m >= 0; m--) {
lightList.push(leftLight[m]);
}

因为“下”和“左”方向的灯是急需倒序的,所以本人动用了三个倒序的 for循环,其实当循环出现的时候,大家都应有考虑我们的代码是或不是有可优化的长空。

优化后的代码是那样子的,在这里小编压缩了4次巡回的选择

function () {
var lightList = [];
var bottomRever;
var leftRever;
bottomRever = Array.from(this.bottomLight).reverse();
leftRever = Array.from(this.leftLight).reverse();
lightList = Array.from(this.topLight).concat(Array.from(this.rightLight));
lightList = lightList.concat(bottomRever);
lightList = lightList.concat(leftRever);
}

列表倒序笔者利用了原生 Array对象的reverse方法。

2.利用“闭包”优化顺序循环播

为了能够使大家的“灯”顺序的跑起来,第一版的思绪是:

给每三个“灯”(注意,这里是每二个,罪过…罪过…)定义叁个setTimeout(),实施时间便是数序的加盟 js 施行队列中去。
代码是底下那样子的:

var zepto_light = Zepto(lightList);
var changeTime = 100;
var lightLength = zepto_light.length;
var totleTime = changeTime * lightLength;
function lightOpen() {
for (var i = 0; i < lightLength; i++) {
(function temp(i) {
lightTimer = setTimeout(function() {
if (stopAnimation === false) {
Zepto(zepto_light).removeClass('light_open');
Zepto(zepto_light[i]).addClass("light_open");
} else {
return;
}
}, changeTime * i);
})(i);
}
}

这么子写的症结很扎眼:假诺自个儿有九十几个“灯”那么就能够在此时此刻的 js 实践队列中投入100个setTimeout(),再一次重申的是自家那边又选取了for循环,在时光复杂度上又追加了。代码的施行功效又下落了。

后来合计了下,JavaScript 中“闭包”符合自己当下的行使处境,就想着用闭包优化一下,优化后代码如下:

lightRun: function () {
var _this = this;
function tempFunc() {
var lightList = _this.getLightList();
var lightLength = lightList.length;
var i = 0;
return function () {
$(lightList, _this.LightArea).removeClass('light_open');
$(lightList[i], _this.LightArea).addClass("light_open");
i++;
//使一轮循环结束后能够继续下次循环
if (i === lightLength) {
i = 0;
}
};
}
var lightRunFunc = tempFunc();
lightRunFunc();
_this.lightInterVal = setInterval(lightRunFunc, _this.setting.roLiSpeed);
}

由上述的代码能够很料定的开采多个亮点:第一,就是削减了 for循环的采用,减少了代码的时间复杂度,第二正是,每一趟笔者可是在此时此刻代码施行的队列中创制两个setInterval()。减小了奉行队列的复杂度。

有关JavaScript实现跑马灯抽取奖金活动实例代码解析与优化(二)的相关文化就给我们介绍到那边,希望本文所述对大家有所支持。

您恐怕感兴趣的篇章:

  • 原生JS达成跑马灯效果
  • 据他们说Marquee.js插件完成的跑马灯效果示例
  • Javascript达成跑马灯效果的简要实例
  • JavaScript达成跑马灯抽取奖金活动实例代码剖判与优化(一)
  • javascript跑马灯抽取奖品实例疏解
  • javascript消息跑马灯实例代码
  • JS完成景况栏跑马灯文字效果代码
  • js文本框走动跑马灯效果代码分享
  • javascript 单行文字向上跑马灯滚动显示
  • js完毕文字跑马灯效果

本文由网络计算发布,转载请注明来源:跑马灯抽奖活动,JavaScript完结跑马灯抽奖活动实