汇报文档

新人独立开发的小项目，错误很多，请做好对自己并没有帮助的心理阅读，同时也非常欢迎您指出错误

使用了KOA作为后台 使用了KOA-static输出静态文件 server.use(static('./www')); //输出./www下的文件

通过控制概率以控制返回结果占比，因为返回结果控制了抽奖结果。从而实现在后台控制抽奖结果

server.use(function *(next){

    if(this.req.url.indexOf('/chou')!=-1){

        var n = Math.random();

        if(n<0.01){                                
            this.body='1';               //百分之一的几率返回1，即百分之一的几率抽中1对应奖品
        }else if(n<0.03){
            this.body='2';
        }else if(n<0.1){
            this.body='3';
        }else if(n<0.3){
            this.body='4';
        }else if(n<0.4){
            this.body='5';
        }else if(n<0.7){
            this.body='6';
        }else if(n<1){
            this.body='7';
        }
    }else{                              //如果都没有，执行下一步
        yield next;
    }
});

抽奖动画的实现 1、创建函数

    function Lottery(x) {
    this.timer = null; //定时器
    this.rotateIndex = 0; //旋转位置
    this.speed = 200; //旋转初始速度
    this.circle = 0; //已转动圈数
    this.minCircle = 5; //至少转多少圈
    this.prize = x; //中奖索引
    this.count = 8; //奖品数量
    this.backFn = function() {}; //动画结束执行的函数
}

Lottery.prototype = {
    // 开始
    start: function() {
        // console.log('start');
        var that = this;
        timer = setTimeout(function() {
            that.start();
        }, this.speed);

        this.addCircle();
        this.setState();
        this.changeSpeed();
    },

    // 停止

    stop: function(argument) {
        if (this.circle > this.minCircle && this.prize == this.rotateIndex) {
            console.log(this.circle, this.rotateIndex)
            clearTimeout(timer);
            // 返回函数
            setTimeout(this.backFn, 300);
        }
    },
   
    // 动画-当前位置添加class
    setState: function() {        
        var beforeIndex = this.rotateIndex === 0 ? this.count - 1 : this.rotateIndex - 1;
        $('#lotteryL').find('.li-' + beforeIndex).removeClass('on');
        $('#lotteryL').find('.li-' + this.rotateIndex).addClass('on');
        this.stop();
        this.rotateIndex = this.rotateIndex + 1;
        if (this.rotateIndex == this.count) {
            this.rotateIndex = 0;
        }
    },

    // 改变速度-第一圈加速，最后2圈减速
    changeSpeed: function() {
        // 加速
        if (this.circle < 2) {
            this.speed -= 15;
        }

        // 减速
        if (this.circle > this.minCircle - 1) {
            this.speed += 30;
        }
    },

    // 转动圈数
    addCircle: function(argument) {
        if (this.rotateIndex == 0) {
            this.circle = this.circle + 1;
        }
    }
}

将后台返回的结果传入函数，并使用ajax实时传入数据，让前台进行动画效果，并在下方显示中奖物品

    window.onload=function(){
        var butt=document.querySelector('#lotteryl');

        butt.onclick=function(){
            ajax({
                url:'/chou',                    //接口
                success:function(str){
                    var n=parseInt(str);

                    // $('#lotteryl').on('click', function() {
                        // var ul = document.getElementById('#lotteryL').find('div');
                        // ul.removeClass('on');


                        var lotteryFn = new Lottery(n);
                        lotteryFn.start();
                        // lotteryFn.prize = n;
                        lotteryFn.backFn = function() {
                            alert('恭喜获得'+n+'号奖品')
                        };
                        llst = document.getElementById('luckList');
                        llst.innerHTML+='您已抽得'+n+'号奖品'+'<br>';       //添加中奖提示
                    // })
                }
            })

        }
    }

然而此项目并没有抽奖时解决添加类失败的问题，因此并没有实现跑马灯抽奖动画