抽奖 - 爱码网

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>双十二手机抽奖代码</title>

<link rel="stylesheet" type="text/css" href="css/styleCJ.css"/>

</head>
<body>

<div id="title">
    <img src="img/title.png">
</div>

<div class="shanDeng" id="deng">
    <div id="luck"><!-- luck -->
        <table>
            <tr>
                <td class="luck-unit luck-unit-0"><img src="img/1.png"></td>
                <td class="luck-unit luck-unit-1"><img src="img/2.png"></td>
                <td class="luck-unit luck-unit-2"><img src="img/4.png"></td>
                <td class="luck-unit luck-unit-3"><img src="img/3.png"></td>
            </tr>
            <tr>
                <td class="luck-unit luck-unit-11"><img src="img/6.png"></td>
                <td rowspan="2" colspan="2" class="cjBtn" id="btn"></td>
                <td class="luck-unit luck-unit-4"><img src="img/5.png"></td>
            </tr>
            <tr>
                <td class="luck-unit luck-unit-10"><img src="img/1.png"></td>
                <td class="luck-unit luck-unit-5"><img src="img/6.png"></td>
            </tr>
            <tr>
                <td class="luck-unit luck-unit-9"><img src="img/3.png"></td>
                <td class="luck-unit luck-unit-8"><img src="img/4.png"></td>
                <td class="luck-unit luck-unit-7"><img src="img/8.png"></td>
                <td class="luck-unit luck-unit-6"><img src="img/7.png"></td>
            </tr>
        </table>
    </div><!-- luckEnd -->
</div>

<script src="js/jquery-1.8.3.min.js"></script>
<script>
    var luck={
        index:-1,    //当前转动到哪个位置，起点位置
        count:0,    //总共有多少个位置
        timer:0,    //setTimeout的ID，用clearTimeout清除
        speed:20,    //初始转动速度
        times:0,    //转动次数
        cycle:5,    //转动基本圈数：即至少需要转动多少次再进入抽奖环节
        prize:-1,    //中奖位置
        init:function(id){
            if ($("#"+id).find(".luck-unit").length>0) {
                $luck = $("#"+id);
                $units = $luck.find(".luck-unit");
                this.obj = $luck;
                this.count = $units.length;
                $luck.find(".luck-unit-"+this.index).addClass("active");
            };
        },

        
        roll:function(){
            var index = this.index;
            var count = this.count;
            var luck = this.obj;
            $(luck).find(".luck-unit-"+index).removeClass("active");
            index += 1;
            if (index>count-1) {
                index = 0;
            };
            $(luck).find(".luck-unit-"+index).addClass("active");
            this.index=index;
            return false;
        },
        stop:function(index){
            this.prize=index;
            return false;
        }
    };


    function roll(){
        luck.times += 1;
        luck.roll();
        console.log(luck.times);
        if (luck.times > luck.cycle*luck.count && luck.prize==luck.index) {
            clearTimeout(luck.timer);
            luck.prize=-1;
            luck.times=0;
            click=false;
        }else{
            if (luck.times<(luck.cycle-1)*luck.count) {
                //加速
                luck.speed -= 10;
            }else if(luck.times==luck.cycle*luck.count) {
                //var index = Math.random()*(luck.count)|0;//中奖位置,可以加载的时候就设置好
                //luck.prize = index;        
            }else{
                if (luck.times > luck.cycle*luck.count && ((luck.prize==0 && luck.index==7) || luck.prize==luck.index+3)) {
                    luck.speed += 110;
                }else{
                    luck.speed += 20;
                }
            }
            if (luck.speed<40) {//最高速度
                luck.speed=40;
            };

            luck.timer = setTimeout(roll,luck.speed);
        }
        return false;
    }


//闪灯效果
    var num = 0;
    $(".shanDeng").attr("class",function(){
        setInterval(function(){ 
            num++;
            if(num%2==0){
                $('#deng').addClass("shanDeng2");
            }else{
                $('#deng').addClass("shanDeng");
                $('#deng').removeClass('shanDeng2');
            }
        },500)
    })


    var click=false;
    window.onload=function(){
        luck.init('luck');
        $("#btn").click(function(){
            //按下弹起效果
            $("#btn").addClass("cjBtnDom");
            setTimeout(function(){    
                $("#btn").removeClass("cjBtnDom");
            },200);

            
            if(click) {
                return false;
            }
            else{
                luck.speed=100;//初始速度
                luck.prize=1;//中奖位置
                luck.cycle=3;//初始转圈数量
                luck.count=12;//奖品种类，起始位置0-11，总数12
                roll();
                click=true;
                return false;
            }
        
        });
    };
</script>
</body>
</html>