【javascript】九宫格抽奖组件设计
一些主要点
1. 转圈的顺序(顺时针或者逆时针);
2. 转圈的速率(从慢到快再到慢);
3. 位置的问题(下一次抽奖的起始位置是上一次抽奖的结束位置);
4. 转圈的圈数或者移动的次数。
基本原理
1. 抽奖的过程其实就是通过不断的改变 dom(通常为 li
)的索引值,来达到移动的效果(比如 8 个奖项,索引值的变化如下 0 -> 1, 1 -> 2, ... , 6 -> 7 , 7 -> 0),所以 dom 的排版(绝对定位)就显得很重要了;
2. 对于移动的速度其实就是 dom 切换的快慢,在 js 中,我们可以通过定时器 setTimeout 的执行时间来控制移动的速度;
3. 移动速度的增减;
4. 什么时候移动结束。
如何写代码
外部如何使用
1. 首先通过构造函数实例化,并且在实例化时传入相关参数(一般都为 object)(比如 var lottery = new Lottery(opts)),来实现该组件的初始化;
2. 组件初始化后,还需要有个方法来执行抽奖的过程(比如 lottery.start());
3. 当然我们还需要告诉组件中的是什么奖励(一般都是接口调用返回给前端),即中奖的位置在哪里,相当于奖励的索引(比如 lottery.prize = 1)。
实例化参数 opts
- opts.index 当前移动到哪个位置,起点位置,默认第一个(即容器的第一个子元素)
- opts.length 奖励个数,默认 8 个
- opts.speed 初始移动速度
- opts.maxSpeed 移动最大速度,数值越小,移动越快
- opts.minSpeed 移动最小速度,数值越大,移动越慢
- opts.base 基本移动次数,即小于基本转动次数时,速度递增,大于该数值,速度递减
- opts.totals 总移动次数,即大于该数值时,转动即将结束
- opts.moveTo 移动的过程,有两个参数(before 和 after),before 是移动前的索引值,after 是移动后的索引值,可以在这个方法中自己设置动画效果,比如 css3
- opts.callback 移动结束之后的回调
内部实现
'use strict';
module.exports = function Lottery(opts) {
this.index = opts.index || 0;
this.speed = opts.speed || 60;
this.maxSpeed = opts.maxSpeed || 40;
this.minSpeed = opts.minSpeed || 250;
this.base = opts.base || 3;
this.totals = opts.totals || 12;
this.length = opts.length || 8;
this.prize = -1; // 中奖位置,需要外部来更新
var self = this;
var speed = self.speed;
var timer = null; // 定时器 ID
var counts = 0; // 移动次数计数
// 在移动的过程中,其实就是索引值的改变,比如 0 -> 1, 1 -> 2, ... , 6 -> 7 , 7 -> 0
var move = function() {
var index = self.index;
var len = self.length;
var before = self.index; // 当前
index += 1; // 下一个
// 当索引到最后一个时,下一个索引就是第一个
if (index > len - 1) {
index = 0;
}
opts.moveTo && opts.moveTo(before, index);
self.index = index;
};
// 外部调用抽奖方法
this.start = function() {
move();
counts += 1;
if (counts > this.totals && this.prize === this.index) {
clearTimeout(timer);
counts = 0;
speed = this.speed;
this.prize = -1;
opts.callback && opts.callback();
} else {
if (counts < this.base) {
speed -= 10;
} else {
if (counts > this.totals) {
speed += 60;
} else {
speed += 30;
}
}
speed = speed < this.maxSpeed ? this.maxSpeed : (speed > this.minSpeed ? this.minSpeed : speed);
timer = setTimeout(function() {
self.start();
}, speed);
}
};
};
扩展
1. 不限九宫格排列的抽奖;
2. 可以满足圆盘式指针旋转的抽奖。
【javascript】九宫格抽奖组件设计的更多相关文章
- atitit.抽奖活动插件组件设计--结构设计and 抽奖流程建模
atitit.抽奖活动插件组件设计--结构设计and 抽奖流程建模 1. 组件结构 1 2. startDraw 开始抽奖流程建模 1 3. 抽奖算法 2 作者:: 老哇的爪子 Attilax 艾龙, ...
- HTML5拓扑图形组件设计之道(一)
HT for Web(http://www.hightopo.com/guide/readme.html)提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表 ...
- Twproject Gantt – 开源的 JavaScript 甘特图组件
Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CSS 皮肤等功能.更重要的是,它是免费开源的. ...
- HT图形组件设计之道(一)
HT for Web简称HT提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表达的我们希望提供:Everything you need to create ...
- xmlplus 组件设计系列之零 - xmlplus 简介
xmlplus 是什么 xmlplus 是博主写的一个 JavaScript 框架,用于快速开发前后端项目. xmlplus 基于组件设计,组件是基本的构造块.评价组件设计好坏的一个重要标准是封装度. ...
- React组件设计
React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...
- React组件设计(转)
React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...
- React组件设计技巧
React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...
- 【Web技术】314- 前端组件设计原则
点击上方"前端自习课"关注,学习起来~ 译者:@没有好名字了译文:https://github.com/lightningminers/article/issues/36,http ...
随机推荐
- python高级——垃圾回收机制
GC作为现代编程语言的自动内存管理机制,专注于两件事:1. 找到内存中无用的垃圾资源 2. 清除这些垃圾并把内存让出来给其他对象使用.GC彻底把程序员从资源管理的重担中解放出来,让他们有更多的时间放在 ...
- [Vijos1763]Wormhole (贪心/模拟?)
已经是NOIP考前的最后一天了 现在在杭州的宾馆里 因为自己没带电脑 因此用ADMAN的电脑 题目描述 一维的世界就是一个数轴.这个世界的狭小我们几乎无法想象. 在这个数轴上,有N个点.从左到右依次标 ...
- python网络编程(十)
select版-TCP服务器 1. select 原理 在多路复用的模型中,比较常用的有select模型和epoll模型.这两个都是系统接口,由操作系统提供.当然,Python的select模块进行了 ...
- Flask蓝图
它的作用就是将 功能 与 主服务 分开怎么理解呢? 比如说,你有一个客户管理系统,最开始的时候,只有一个查看客户列表的功能,后来你又加入了一个添加客户的功能(add_user)模块, 然后又加入了一个 ...
- Vue(十二)vue实例的属性和方法
vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...
- Compile groovy mixed with java in Maven
Assuming that groovy codes are in src/main/groovy and java codes are in src/main/java. We can use 2 ...
- 3、css初识
前端内容就分三部分html.css.javascript(js),对一个网页来说html相当于是一个裸体的人,css相当于给这个人穿上了衣服,javascript相当于给这个人赋予动作行为,今天我们要 ...
- .net 多态
https://espider.github.io/CLR/inheritance-polymorphism/
- 本机ip、127.0.0.1和0.0.0.0区别及内环流量
本机ip.127.0.0.1和0.0.0.0区别及内环流量 所谓内环流量 简单的说是指 计算机内部,程序间通讯产生的流量,或者叫 本地流量,对应的是来自网络的流量. 比如,你安装了卡巴斯基,avast ...
- python测试开发django-50.jquery发送ajax请求(get)
前言 有时候,我们希望点击页面上的某个按钮后,不刷新整个页面,给后台发送一个请求过去,请求到数据后填充到html上,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.Ajax可以完美的 ...