![js 9宫格抽奖_第1张图片](http://img.e-com-net.com/image/info8/c000d20544cb46649e9c790c6fd26f12.gif)
HTML
<div id="app"> div>
css
.lack_prize-ul { width: 400px; display: flex; flex-wrap: wrap; border: 1px solid red;}
.lack_prize-li{ list-style: none; display: inline-block; border: 1px solid; width: 100px; height: 100px; text-align: center; line-height: 100px;}
.btn_select { cursor: pointer; background-color: aquamarine;}
.selected {background-color: brown;}
js
使用js
1.初始化
let lackFn = new SingleLackDraw({
el: "#app"
})
2.开始抽奖,设置中奖值
lackFn.btnDom.onclick = function () {
lackFn.getlacKNum()
lackFn.setLackNum(parseInt(Math.random(0,1)*8 ))
}
逻辑处理js
"use strict";
(function (window) {
var EmployeeWindow = window;
function my_$(strClass) {
var val = document.querySelector(strClass);
return val;
}
var LackDraw = (function () {
function LackDraw(option) {
this.el = my_$(option.el);
this.count = 8;
this.run = [0, 1, 2, 5, 8, 7, 6, 3];
this.defaultSel = 0;
this.t = option.time || 500;
this.decreasing = option.decreasing || 50;
this.highSpeed = option.highSpeed || 5;
this.topSpeed = option.topSpeed || 60;
this.timestr = null;
this.init();
}
LackDraw.prototype.init = function () {
drawDom(this);
};
LackDraw.prototype.setLackNum = function (lacknumber) {
this.lacknumber = lacknumber;
};
LackDraw.prototype.getlacKNum = function () {
var that = this;
if (that.timestr !== null)
return;
var liDoms = document.querySelectorAll('.lack_prize-li');
var runList = that.run;
var t = that.t;
var flag = true;
var lackNum = 0;
timeChangeFn(liDoms, runList, that, t, flag, lackNum);
};
return LackDraw;
}());
function timeChangeFn(liDoms, runList, that, t, flag, lackNum) {
that.timestr = setTimeout(function () {
if (that.defaultSel > 7) {
that.defaultSel = 0;
lackNum += 1;
}
for (var i = 0; i < liDoms.length; i++) {
liDoms[i].classList.remove('selected');
}
liDoms[runList[that.defaultSel]].classList.add('selected');
++that.defaultSel;
if (flag) {
if (t <= that.topSpeed) {
if (lackNum > that.highSpeed) {
flag = false;
timeChangeFn(liDoms, runList, that, t, flag, lackNum);
}
else {
timeChangeFn(liDoms, runList, that, t, flag, lackNum);
}
}
else {
t -= that.decreasing;
timeChangeFn(liDoms, runList, that, t, flag, lackNum);
}
}
else {
if (t > that.t && that.defaultSel == that.lacknumber) {
clearTimeout(that.timestr);
that.timestr = null;
}
t += that.decreasing;
that.timestr && timeChangeFn(liDoms, runList, that, t, flag, lackNum);
}
}, t);
}
function drawDom(that) {
var count = that.count;
var btnNum = (count / 2) + 1;
var liStr = '';
for (var i = 0; i <= count; i++) {
liStr += "".concat(i, "");
}
var htmlcanvas = ".concat(liStr, "\n ");
that.el.innerHTML = "".concat(htmlcanvas);
that.btnDom = my_$(".lack_prize-li:nth-child(".concat(btnNum, ")"));
var defaultDom = my_$(".lack_prize-li:nth-child(".concat(that.defaultSel + 1, ")"));
that.btnDom.classList.add('btn_select');
defaultDom.classList.add('selected');
}
EmployeeWindow.SingleLackDraw = (function () {
var instance = null;
return function () {
var option = Array.from(arguments)[0];
if (!instance) {
return instance = new LackDraw(option);
}
return instance;
};
})();
})(window);
转动实现思路
- 定义run 选中顺序
- 定义setTimeout 递归回调 timeChangeFn函数不断(decreasing)递减时间
- 递减到某一个时间点 (flag) 暂停递减 维持(lackNum) 一定时间高速旋转。
- lackNum到达一定时间,开始递增(decreasing)定时
- 到达初始化时间且指定的中奖数字 清除定时器