Es6语法实现的转盘抽奖效果——可配置转盘的抽奖概率

最近公司要做一个转盘抽奖的效果，但是我们可以控制转盘抽奖的概率，自己用es6简单的实现了下，中间虽然遇到一些问题，但最终都是解决了，下面说一下我的思路。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/index.css">
        <script src="js/index.js"></script>
    </head>
    <body>
        <div class="main">
            <div class="active">
                <div class="rotate_title"><img src="images/rotate_title.png" alt=""></div>
                <div class="rotate">
                    <div class="zd_round"><img src="images/zd.png" alt=""></div>
                    <div class="pointer"><img src="images/pointer.png" alt="" width="100%"></div>
                </div>
            </div>
        </div>
        <script>
            new Draw({
                el: ".zd_round img",//转动的元素
                btn:".pointer", //点击转动的元素
                count: 3, //转盘转动的圈数,
                chance: {
                    1: "40%",
                    5: "40%", //指定抽奖概率，其余则平分
                },
                num:8,//转盘的总个数
                innerTime:4000, //转盘转动的时间
                endFunc:function(pos){
                    console.log(pos)
                } //转盘动画结束后的回调函数
            })
        </script>
    </body>
</html>

　　上面是html代码，我就不多做介绍了，效果原理主要还是利用css3 的rotate属性实现元素的旋转，下面我们看js代码，我们使用的事面向对象编程，我们可以在前台配置参数多次调用。下面我们开始js代码的编写：

(function () {
    function $_(name) {
        return document.querySelector(name);
    }
    class Draw {
        constructor(opt) {
        }
    }
    window.Draw=Draw;
})();

首先我们通过一个匿名函数自执行的方式，这样做的好处的是防止内部的变量污染全局，里面的变量都形成了一个局部变量，最下面我们通过把Draw类暴露给全局，这样我们就可以在外部直接调用。

 constructor(opt) {
            let defaultopt = {
                el: ".zd_round img",//转动的元素
                btn: ".pointer", //点击转动的元素
                count: 3, //转盘转动的圈数,
                chance: {
                    1: "40%",
                    5: "40%", //指定抽奖概率，其余则平分
                },
                num: 8,//转盘的总个数
                innerTime: 4000 //转盘转动的时间
            }
            opt = Object.assign({}, defaultopt, opt);
            this.init(opt);
        }

　我们需要知道的是这是一个构造函数，当我们new 一个类的时候会执行构造函数，把this绑定的属性方法添加到这个类上面，可以看到我们做的事把我们外部调用的参数和我们内部调用的参数的一个合并，我们用到的是es6的Object.assign的方法，不同的童鞋请自行百度，最后我们得到了合并后的一个对象。

 init(opt) {
            let { el, chance, count, num, btn, innerTime ,endFunc} = opt;
            let numArray = Object.keys(chance);
            this.residue = [];
            for (let i = 0; i < num; i++) {
                if (!numArray.includes(String(i))) {
                    this.residue.push(i)
                }
            }
            this.pos = this.getNum(chance);   //确定转盘最后停留的位置
            this.deg = 360 / num;
            this.rotate(el, count, btn, innerTime,endFunc);
}

init

Es6语法实现的转盘抽奖效果——可配置转盘的抽奖概率

猜你喜欢