带着我的小耳机坐在电脑前正YY着自己的女神（哦不，像我这么认真，负责，肯定是在狂飞乱舞的码着代码）
肩膀突然被人拍了一下，吓得我第一反应是Alt+Tab键切换了屏幕，屏幕正前方是显示着一行行代码（我可是在认真的工作）
一切动作如行云流水般，这一切不留痕迹的，（隔鸡可是很聪明的）一本正经的缓缓的转过头
映入眼帘的是...心脏慢慢的开始跳动起来，一位穿着休闲白色衣服的女生出现在了我眼前，那女孩有一双晶亮的眸子,明净清澈,灿若繁星,此时不知她想到了什么，嘴角挂着一抹莫名的笑意，
“隔鸡，嘿嘿，上班时间在干嘛呢，我可看到了”，露出那仿佛抓到小把柄的微笑
“嘿嘿，上班我还能干什么，认真工作呗，，仙狗，怎么，过来找我，又要来剥削我了”，此时看到她那狡黠的笑容，我感到阵阵发冷，每次找我总会有不好的事情发生，不无镇定的说道
“哈哈哈 ，睁着眼都能说瞎话...，我都在这站半天了，我可什么都看到了，什么叫剥削，说人话”,捂着嘴偷笑了出来，
"你说，姑奶奶，我怕了，你说过来干什么"
“没事，别紧张，我只是有一个需求需要你来对接一下，很简单的，很容易实现的”
“每次都说简单，后面接着需求一大推，你看我的头发，掉了一根又一根了，头发都快秃了”，我抓着这为数不多的头发，愤恨的说道，
“哈哈哈，忙完了我请你喝奶茶去，这是这次的需求，要做一个抽奖的九宫格，公司要举行活动，需要用到”，打开需求地址，映入眼帘的是一张九宫格图
“呵呵，我是能被一杯奶茶收买的吗，肯定不行，要两杯”，笃定的说到
“哈哈哈，原来你是这样的人。。。”
啪啪啪的看着需求，进行分析，看图就知道这是一个典型的活动页，抽奖九宫格，中间点击按钮进行开始，然后进行滚动抽奖
- 1、找个插件直接干，分分钟的事
- 2、canvas画
- 3、原生写
为了能够提现隔鸡那出神入化的技术，用别人的插件那是不可能的，肯定是自己动手写（其实只是看不懂别人的，装逼失败，。。。）
- 初始化用户配置
- 开始装配转盘
- 绑定抽奖事件
- 禁用抽奖 防止重复进行点击
- 转盘加速
- 转盘匀速
- 减速之前的操作，支持用户追加操作（例如：从后台获取中奖号）
- 转盘减速
- 转盘滚动
- 转盘停止，还原设置
- 转盘当前格子下标
- 转盘总格子数
- 获取中奖号，用户可重写该事件，默认随机数字
隔鸡的独特的设计思路，为了能实现复用性，是不是很厉害，很牛逼（让我嘚瑟一会，是不是看着上面这么多步骤头晕眼花，隔鸡的都眼花了，那接下来一步一步的实现这些骚操作
- HTML布局
- CSS布局
- JS逻辑代码
<div id="wrap-log">
<div>
<div data-name="0" class="inner active">啥也没中在抽一次</div>
<div data-name="1" class="inner">请我喝奶茶</div>
<div data-name="2" class="inner">请我吃火锅</div>
<div data-name="3" class="inner">我请你吃烤肉</div>
<div id="btnLottery">点击抽奖</div>
<div data-name="4" class="inner">我请你喝白开水</div>
<div data-name="5" class="inner">请我吃小龙虾</div>
<div data-name="6" class="inner">我请你吃狗粮</div>
<div data-name="7" class="inner">请我吃烤鱼</div>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
#wrap-log {
width: 310px;
height: 310px;
background: #d80215;
margin: 100px auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
border-radius: 4px;
padding-left: 2px;
}
.inner {
border-radius: 8px;
width: 100px;
height: 100px;
display: flex;
font-size: 18px;
text-align: center;
justify-content: center;
align-items: center;
background: #ffeeee;
float: left;
margin: 1px;
}
.active {
background: aqua;
}
#btnLottery {
border-radius: 8px;
width: 100px;
height: 100px;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
margin: 1px;
background: yellow;
float: left;
}
</style>
<script>
window.onload = function () {
let btnLottery = document.querySelector("#btnLottery")
let inner = document.querySelectorAll(".inner")
var time, time1, time2, time4;
let defaultConfig = {
index: 0, // 初始位置
speed: 200, // 当前转动速度
downMax: 1000, // 减速上限
waiting: 500, // 减速上限
isRuning: false, // 当前是否正在抽奖
upMax: 100, // 速度上限
}
// 绑定点击开始抽奖事件
function btnClickAction() {
rollup()
}
// 绑定点击事件
btnLottery.addEventListener("click", btnClickAction)
// 当点击抽奖的时候 开启一个定时器运动 把当前的class去掉 下一个添加新的class
function rollup() {
inner[_index()].className = "inner "
++defaultConfig.index
btnLottery.removeEventListener("click", btnClickAction) // // 禁用抽奖 防止重复进行点击
inner[_index()].className = "inner active"
time = setTimeout(() => {
rollup()
}, defaultConfig.speed)
// 当前是否正在抽奖 如果正在抽奖
if (!defaultConfig.isRuning) {
_up()
defaultConfig.isRuning = true
}
}
// 进行加速运动
function _up() {
// 是否当前的转速时间小于最大的速度
if (defaultConfig.speed <= defaultConfig.upMax) {
_constant()
} else {
defaultConfig.speed -= 50
time1 = setTimeout(() => {
_up()
}, defaultConfig.speed)
}
}
// 有3秒时间进行匀速运动
function _constant() {
clearTimeout(time1)
time2 = setTimeout(() => { _down() }, defaultConfig.waiting)
}
// 停止活动了 进行运动停止 转盘停止，还原设置
function _stop() {
clearTimeout(time)
clearTimeout(time4)
btnLottery.addEventListener("click", btnClickAction)
defaultConfig.isRuning = false
defaultConfig.speed = 200
alert(`${inner[_index()].innerHTML}`)
}
// 判断在某个条件下是否该进行停止跑马灯效果运动
function _down() {
// 可以判断在某个值进行停下来
if (defaultConfig.speed > defaultConfig.downMax && _index() === Math.round(Math.random()*inner.length)) {
_stop()
} else {
clearTimeout(time2)
defaultConfig.speed += 100
time4 = setTimeout(() => { _down() }, defaultConfig.speed)
}
console.log(defaultConfig.speed, _index(), defaultConfig.index)
}
// 获取_index 进行取余来代替index 余数肯定不会大于他的最大个数
function _index() {
return defaultConfig.index % inner.length
}
}
</script>
啦啦啦，我是码代码的小码农，最后放上我的github源代码地址 github地址