共计 1812 个字符，预计需要花费 5 分钟才能阅读完成。
总是看到类似的九宫格抽奖效果, 后来想自己手撸一个试一试吧。(多多尝试, 万一成功了呢 github L6zt)
先来总结一下效果, 类似与跑马灯效果，闪动效果先快后慢。代码解析如下所示：代码
<div class=”gift-container”>
<ul>
<li>
<section class=”gift-box active” data-role=”0″>0</section>
<section class=”gift-box” data-role=”1″>1</section>
<section class=”gift-box” data-role=”2″>2</section>
</li>
<li>
<section class=”gift-box” data-role=”7″>7</section>
<section class=”gift-box get-gift-btn” > 抽奖 </section>
<section class=”gift-box” data-role=”3″>3</section>
</li>
<li>
<section class=”gift-box” data-role=”6″>6</section>
<section class=”gift-box” data-role=”5″>5</section>
<section class=”gift-box” data-role=”4″>4</section>
</li>
</ul>
<div>
<label for=”gift-num”>
<span> 抽奖数字 <small>0-7</small>:</span>
<input type=”text” id=”gift-num” name=”gift-name”>
</label>
</div>
</div>
<script src=”jquery.js”></script>
<script>
$(function () {
// 奖号 dom 元素
let $frameList = $(‘[data-role]’);
let $input = $(‘#gift-num’);
// 定时器的值
let k = null;
// 奖号 dom 元素 总长度
let len = null;
// 初始化 闪动间隔时间 毫秒数
let initDelayTime = 50;
// 抽奖号数
let times = 0;
// 抽圈数
let circleCount = 0;
// 是不是在抽奖
let isBusy = false;
// 抽奖初始 号数
let oldTimes = null;
// 抽奖号数 dom 元素 做个排序，分个大小
frameList = Array.from($frameList).sort((a, b) => {
return $(a).data(‘role’) – $(b).data(‘role’)
});
len = frameList.length;
// 抽奖开始效果
function startGiftAm () {
// 抽奖第一帧时，给 oldTimes 赋值起始抽号数
k || (oldTimes = times);
// 当前应激活的元素
let $curItem = $(frameList[(times++) % len]);
// 抽奖圈数
circleCount = parseInt((times – oldTimes) / len);
// 根据圈数 改变 闪动间隔时间
switch (circleCount) {
case 0:
case 1: {
break;
}
case 2:
case 3: {
initDelayTime = 100;
break;
}
default : {
initDelayTime = 200
}
}
//
$frameList.removeClass(‘active’);
$curItem.addClass(‘active’);
// 如果够四圈 并且 当前抽奖号数等于 结束抽奖号数 终止抽奖，并初始化抽奖 状态
if(circleCount === 4 && $input.val() == $curItem.data(‘role’)) {
circleCount = 0;
k = null;
isBusy = false;
initDelayTime = 50;
} else {
k = setTimeout(startGiftAm, initDelayTime);
}
};
//
$(‘.get-gift-btn’).on(‘click’, function () {
if (!isBusy) {
console.log(isBusy);
isBusy = true;
startGiftAm();
}
})
})
</script>
demo 地址
