九宫格抽奖

小demo 1

css部分:

        ul{ 
            margin: 0 auto;
            padding: 0;
            width: 576px;
            height: 513px;
            border:4px solid red;
            font-size: 0;
        }
        li,a{
            display: inline-block;
            width: 190px;
            height: 170px;
            border:0.5px solid red;
            font-size: 14px;
        }
        ul li .mask{
            width: 190px;
            height: 170px;
            position: relative;
            left:0;
            top:0;
            display: block;
            background-color: rgba(0,0,0,.5);
            z-index: 999;
            box-shadow:0px -5px 10px 0px white inset,/* 添加转动时图片的阴影 */
                -5px 0px 10px 0px white inset,
                5px 0px 10px 0px white inset,
                0px 5px 10px 0px white inset; 
            }
        ul .active .mask{
            display: none;
            }
        #page {
            line-height: 32px;
            color: #9a9a9a;
            text-align: center;
            position:absolute;
            left: 50%;
            top: 50px;
            width: 300px;
            height: 50px;
            margin-left: -150px;
            display: none;
            background: #000;
            color: #fff;
        }
                
        .act .mask{
            display: block;
        }

html部分:

<ul>
    <li>1<div class="mask"></div></li>
    <li>2<div class="mask"></div></li>
    <li>3<div class="mask"></div></li>
    <li>4<div class="mask"></div></li>
    <a>GO</a>
    <li>6<div class="mask"></div></li>
    <li>7<div class="mask"></div></li>
    <li>8<div class="mask"></div></li>
    <li>9<div class="mask"></div></li>
</ul>
<div id="page"></div>

Js部分:

var arr=[0,1,2,4,7,6,5,3]  //给图片设置一个转动的方向
    var arrLi=document.getElementsByTagName("li");
    var oBtn=document.getElementsByTagName("a")[0];    
    var tim; //时间
    var index=0;  
    var swh=true;
    oBtn.onclick=function(){    
        if(swh){
            swh=false;
            speed = 50;
            roll()
            function roll(){
                arrLi[arr[index]].className="";
                index++;  //将物品连续在一起转动
                if(index>=8){
                    index=0;
                }
                arrLi[arr[index]].className="active";
                speed += 20;
                time=setTimeout(roll,speed);  //转动的速度
            }
            
            setTimeout(function(){
                clearTimeout(time);
                if(index==0){   //抽奖时阻止抽到最好的物品
                    arrLi[arr[index]].className="";
                    arrLi[arr[index+1]].className="active";
                }                
                swh=true;
            },Math.random()*3500+1000)  //转动的时间
        }    
    }    

小demo 2

css部分:

     html,body{
            width: 100%;
            height: 100%;
            max-width: 750px;
            margin: auto;
        }
         
        .outBox{
            width: 100%;
            height: 60%;
            background: gray;
            position: relative;
            display: flex;
            flex-flow: row wrap;
                     
        }
         
        .prize{
            width: 33%;
            height: 40%;
            text-align: center;
            font-size: xx-large;
            color: #fff;
            padding-top: 15%;
            box-sizing: border-box;
            border: 6px double #AB945E;
        }
         
        .prize.active{
            background: goldenrod;
        }
         
        .btn{
            position: absolute;
            left:30%;
           /* bottom:-20%;*/
            width: 40%;
            text-align: center;
            height: 12%;
            font-size: xx-large;
        }

HTML部分:

   <div class="outBox" id="lotteryBoxs">      
        <div class="prize prize-0 one">一等奖</div>
        <div class="prize prize-1 two">二等奖</div>
        <div class="prize prize-3 four">谢谢参与</div>
        <div class="prize prize-2 three">三等奖</div>
        <div class="prize"> <button class="btn">开启好运</button></div>
        <div class="prize prize-5 two">二等奖</div>
        <div class="prize prize-6 four">谢谢参与</div>
        <div class="prize prize-7 three">三等奖</div>
        <div class="prize prize-8 three">三等奖</div>               
    </div>     

js部分:

$(document).ready(function() {
                // 转盘的初定义
                var lottery = {
                    index: 0, //当前转动到哪个位置，起点位置
                    count: 0, //总共有多少个位置
                    timer: 0, //setTimeout的ID，用clearTimeout清除
                    speed: 10, //初始转动速度
                    times: 0, //转动次数
                    cycle: 30, //转动基本次数：即至少需要转动多少次再进入抽奖环节
                    prize: 0, //中奖位置
                    init: function(id) {
                        if ($("#" + id).find(".prize").length > 0) {
                            $lottery = $("#" + id);         //父盒子
                            $units = $lottery.find(".prize"); //子集
                            this.obj = $lottery;
                            this.count = $units.length;
                        }
                    },
                    roll: function() {
                        var index = this.index;
                        var count = this.count;
                        var lottery = this.obj;
                        $(lottery).find(".prize").removeClass("active");
                        index += 1;
                        if (index > count - 1) {
                            index = 0;
                        }
                        $(lottery).find(".prize-" + this.index).addClass("active");
                        this.index = index;
                        return false;
                    },
                    stop: function(index) {
                        this.prize = index;
                        return false;
                    }
                };
             
                // 中奖转动事件
                function roll() {
                    lottery.times += 1;
                    lottery.roll();
                    var prize_site = $("#lotteryBoxs").attr("prize_site");
                    if (lottery.times > lottery.cycle + 10 && lottery.index == prize_site) {
                        var prize_id = $("#lotteryBoxs").attr("prize_id");
                        var prize_name = $("#lotteryBoxs").attr("prize_name");
                        console.log(prize_site+"结果")
                        //中奖情况的判断--模态框
                        if(prize_site == 1 || prize_site == 2 || prize_site == 3){
                            //已中奖
                            setTimeout(function(){
                                console.log("恭喜你获得" + prize_name)
                            },500)
                        }else{
                            //未中奖
                            setTimeout(function(){
                                console.log("中奖结果：" + prize_name)
                            },500)
                             
                        }
             
                        clearTimeout(lottery.timer);
                        lottery.prize = -1;
                        lottery.times = 0;
                        click = false;
             
                    } else {
                        if (lottery.times < lottery.cycle) {
                            lottery.speed -= 20;
                        } else if (lottery.times == lottery.cycle) {
                            var index = Math.random() * (lottery.count) | 0;
                            lottery.prize = index;
                        } else {
                            if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == lottery.count - 1) || lottery.prize == lottery.index + 1)) {
                                lottery.speed += 90;
                            } else {
                                lottery.speed += 30;
                            }
                        }
                        if (lottery.speed < 30) {
                            lottery.speed = 30;
                        }
                        lottery.timer = setTimeout(roll, lottery.speed);
                    }
                    return false;
                }            
                var click = false;            
                // 模拟后台数据的调用
                $(function() {
                    lottery.init('lotteryBoxs');
                    $(".btn").click(function() {
                        if (click) {
                            return false;
                        } else {
                            lottery.speed = 100;
                             
                            //此处数据应该从接口获取
                            var prizeArr=["谢谢参与","一等奖","二等奖","三等奖"]
                            var prizeId = Math.floor(Math.random()*(3-0+1)+0);
                            var prize_site = prizeId;
                            console.log("位置"+prizeId);
                            $("#lotteryBoxs").attr("prize_site", prize_site );
                            $("#lotteryBoxs").attr("prize_name", prizeArr[prizeId]);
                            roll();
                            click = true;
                            return false;             
                        }
                    });
                })                    
            });

...