项目需要实现一个九宫格抽奖的模板，当然是微信小程序版本的，但是现在有点时间，就整理了个js版本的（兼容性，使用jq的dom操作）
当然，不喜欢用jq的同学可以直接使用document来操作，如果不喜欢dom操作的，就移步下一篇博客的微信小程序版本的
代码如下：
<!DOCTYPE html>
<html>
<style>
li {
width: 200px;
height: 200px;
}
.ul {
width: 606px;
height: 606px;
}
.ul li {
float: left;
border: 1px solid #000000;
list-style: none;
line-height: 200px;
text-align: center;
font-size: 50px;
}
</style>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="ul">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
<li class="li8">8</li>
<li class="listart">开始</li>
<li class="li4">4</li>
<li class="li7">7</li>
<li class="li6">6</li>
<li class="li5">5</li>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script>
var last_index = 0, //上一回滚动的位置
amplification_index = 0, //轮盘的当前滚动位置,0表示为第一次
roll_flag = true, //是否允许滚动
max_number = 8, //轮盘的全部数量
speed = 300, //速度，速度值越大，则越慢 初始化为300
finalindex = 3, //最终的奖励
myInterval = "", //定时器
max_speed = 40, //滚盘的最大速度
minturns = 8, //最小的圈数为2
runs_now = 0; //当前已跑步数
$(".listart").bind("click", function() {
//初始化步数
runs_now = 0;
//当前可以点击的状态下
if(roll_flag) {
roll_flag = false;
//启动滚盘，注，若是最终后台无返回就不好意思里
rolling();
}
});
//滚动轮盘的动画效果
function rolling() {
myInterval = setTimeout(function() {
rolling();
}, speed);
runs_now++; //已经跑步数加一
amplification_index++; //当前的加一
//获取总步数，接口延迟问题，所以最后还是设置成1s以上
var count_num = minturns * max_number + finalindex - last_index;
console.log(count_num);
//上升期间
if(runs_now <= (count_num / 3) * 2) {
speed -= 30; //加速
if(speed <= max_speed) {
speed = max_speed; //最高速度为40；
}
}
//抽奖结束
else if(runs_now >= count_num) {
clearInterval(myInterval);
last_index = amplification_index;
roll_flag = true;
}
//下降期间
else if(count_num - runs_now <= 10) {
speed += 20;
}
//缓冲区间
else {
speed += 10;
if(speed >= 100) {
speed = 100; //最低速度为100；
}
}
if(amplification_index > max_number) { //判定！是否大于最大数
amplification_index = 1;
}
//刷新页面
var strli = ".li";
strli += amplification_index;
//全部清除
$("li").each(function() {
$(this).css("background", "#ffffff");
})
//画颜色
$(strli).css("background", "red");
}
</script>
</body>
</html>没有多大的麻烦。而且有备注，就不多解释了
效果图如下：
