js 9宫格抽奖

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";
/**
 * @name 抽奖活动
 * @time 2022/7/19
 * @param el 插入元素目标
 * @param time 启动时速度 默认 500
 * @param decreasing 每次转动时间递减值 50
 * @param highSpeed 最高速度时 转动圈数 5
 * @param topSpeed 最高速度 60
 * @function setLackNum(number) 设置中奖数字
 * @function getlacKNum 点击开始事件
 */
(function (window) {
    var EmployeeWindow = window;
    function my_$(strClass) {
        var val = document.querySelector(strClass);
        return val;
    }
    var LackDraw = /** @class */ (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 = "
\n            ".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）定时
• 到达初始化时间且指定的中奖数字 清除定时器