前端js实现九宫格模式抽奖（多宫格抽奖）

介绍：
　　前端九宫格是一种常见的抽奖方式，js实现如下，掌握其原理，不论多少宫格，都可以轻松应对。（代码可复制直接运行看效果）。
　　该案例以四宫格入门，可扩展多宫格，奖品模块的布局可自由设置。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>四宫格抽奖</title>

</head>

	<style>
		
		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: 44%;
			height: 40%;
			margin: 5% 3%;
			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;
		}
		
		
	</style>



<body>
	
	<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>
		
		
		<button class="btn">开启好运</button>
	</div>

 
    
          
</body>


		<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
		<script>
			
			
			
					$(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;
					
					            }
					        });
					    })
					
					});
			
			
			
		</script>
		

</html>
　　页面效果如下：
前端js实现九宫格模式抽奖（多宫格抽奖）

推荐阅读
