面向对象实现转盘小游戏

文章参照课程学习 展示效果：

    <div class="container">
        <div class="btn">
            <img src="img/btn.png" alt="">
        </div>
        <div class="table">
            <img src="img/pan.png" alt="">
        </div>
    </div>
    <script src="js/lottery.js"></script>
    <script>
        new Lottery({
            rotateNum:8,
            turnTabel:document.getElementsByClassName('container')[0],
            judgeFn:judgeFn

        })

        function judgeFn(num){
            var str = '';
            if (num > 0 && num < 45 ) {
                str = '二等奖'
            } else if (num > 90 && num < 135 || num > 270 && num < 315) {
                str = '三等奖'
            } else if (num > 45 && num < 90 || num > 135 && num < 180 || num > 225 && num < 270 || num > 315 && num < 360) {
                str = '四等奖'
            } else if (num > 180 && num < 225) {
                str = '一等奖'
            }
            alert('恭喜你,获得' + str + '!');
        }
    </script>

主要css代码：

*{
    padding: 0;
    margin:0;
}
.container{
    margin: 100px auto;
    width: 400px;
    position: relative;
}
.table img{
    width: 400px;
    height: 400px;
}
.container .btn{
    position: absolute;
    width: 130px;
    height: 130px;
    left: 50%;
    top: 50%;
    margin-left:-65px;
    margin-top: -65px;
    cursor:pointer;
    z-index: 99;
}
.container .btn img{
    width: 130px;
    position: absolute;
    top: -21px;
}

主要js：

(function(win){
    var defultPars = {
        rotateNum:5,
        turnTabel:document.getElementsByTagName('body')[0],
        judgeFn:function(){}
    }
    win.Lottery = Lottery;
    function Lottery(par){
        //Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）,
        //第一个参数是目标对象，后面的参数都是源对象。
        //若是前后两个对象有相同的两个属性，后面会覆盖的前面的如：Object.assign({a:1,b:2},{a:2,b:2,c:3})结果：{a: 2, b: 2, c: 3}

        this.pars = Object.assign(defultPars,par);
        //为转动设置开关
        this.bool = true;
        this.init();
    }
    Lottery.prototype.init = function(){
        var self = this;
        var btn = this.pars.turnTabel.getElementsByClassName('btn')[0];
        var tabel = this.pars.turnTabel.getElementsByClassName('table')[0];
        btn.onclick = function(){
            if(self.bool){
                self.pars.randomNum = Math.floor(Math.random()*360);
                self.bool = false;
                self.runTabel(self.pars.randomNum);
            }
        }
        // 在WebKit引擎的浏览器中，当CSS 3的transition动画执行结束时，触发webkitTransitionEnd事件。
        tabel.addEventListener('webkitTransitionEnd',function(){
            self.pars.judgeFn(self.pars.randomNum);
            tabel.style.transform = 'rotate('+self.pars.randomNum+'deg)';
            tabel.style.transition = 'none';
            self.bool = true;
        })
    }
    Lottery.prototype.runTabel=function(deg){
        let tabel =this.pars.turnTabel.getElementsByClassName('table')[0];
        var deg = deg+360*this.pars.rotateNum;
        tabel.style.transform = 'rotate('+deg+'deg)';
        tabel.style.transition = 'all 3s';
    }
    
})(window)

github地址： github.com/missyouzi/z…