九宫格抽奖，用到的不多，先看效果：
因为变成gif的原因，看起来会有跳过一些，实际是不会的。
说说思路，首先是布局，布局有两种方式：
这一种要用样式控制好，然后按顺序，而效果图的布局是这样的：
这种布局就要用js去修改一下。
直接上代码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宫格</title>
<style>
.wrap {
width: 600px;
height: 600px;
margin: 0 auto;
}
.main {
width: 600px;
height: 600px;
}
.num {
width: 200px;
height: 200px;
float: left;
text-align: center;
line-height: 200px;
font-size: 40px;
box-sizing: border-box;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num" id="start">抽奖</div>
<div class="num">5</div>
<div class="num">6</div>
<div class="num">7</div>
<div class="num">8</div>
</div>
</div>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
var divNum = document.getElementsByClassName('num');
var startBtn = document.getElementById("start");
//停止位置，因为先 ，所以停止位置是加1
var stopPosition = 8;
var divList = [];
var arr = [0, 1, 2, 5, 8, 7, 6, 3];
for (let i = 0; i < divNum.length; i ) {
divList.push(divNum[arr[i]]);
};
//样式改变
function animation(index) {
divList[index].style.background = 'red';
//选中当前，上一个初始化
if(index == 0){
divList[7].style.background = '#fff';
}else{
divList[index - 1].style.background = '#fff';
};
}
startBtn.onclick = function () {
startBtn.innerText = "抽奖中...";
var roundNum = 0;//转了多少个之后停止，可以看成除以8之后的圈
var currentIndex = 0;//当前选中
speedFun(500);
function speedFun(speed) {
//当转动数量没有达到50个一直加速直到100，当数量到达减速
if(roundNum != 50){
//速度从500到慢，一直到100最快
if(speed != 100){
speed -= 50;
};
roundNum ;
}else{
//速度从快到慢，直到500
if(speed != 500){
speed = 50;
}else{
//速度达到500，如果设置选中位置跟当前选中相同就停止
if(currentIndex == stopPosition){
stopLuck();
return
}
}
};
//数组只有0-7，第八个的时候置0
currentIndex = currentIndex > 7 ? 0 : currentIndex;
animation(currentIndex);
currentIndex ;
//用定时器控制速度，另一种思路也可以用计时器
setTimeout(function () {
speedFun(speed);
}, speed)
}
}
//停止之后要中奖还是不中奖函数
function stopLuck() {
startBtn.innerText = "抽奖";
}
</script>
</body>
</html>这是很简单的一个demo，看看代码估计就会了，但是希望可以改成自己的代码。
（完）
