Hello~各位ITer！
这里是每周二三陪你技术内卷的小谷！
作为一名前端开发工程师，相信大家多少都有自己做过一些小游戏程序，比如贪吃蛇，五子棋，猜拳等等！今天向大家分享如何实现制作一个【抽奖大富翁】吧！——文末附上源码
算法思路：
大富翁是一个环形转盘，那就要将它转换成线性的；
当点击开始，直到转动停止后，在停留的方格上添加红色命中背景，提示奖品；
使用定时器来控制转盘的速度。
最终转盘效果图：
页面布局Part.1
底部放一个背景图，上面是表格布局——横向布局；
每行四个单元格，中间两行是两个，中间空出来，放按钮。
<tr>
<td class="lottery-unit lottery-unit-0"><img src="images/1.png"></td>
<td class="lottery-unit lottery-unit-1"><img src="images/2.png"></td>
<td class="lottery-unit lottery-unit-2"><img src="images/4.png"></td>
<td class="lottery-unit lottery-unit-3"><img src="images/3.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-11"><img src="images/7.png"></td>
<td colspan="2" rowspan="2"><a href="#"></a></td>
<td class="lottery-unit lottery-unit-4"><img src="images/5.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-10"><img src="images/1.png"></td>
<td class="lottery-unit lottery-unit-5"><img src="images/6.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-9"><img src="images/3.png"></td>
<td class="lottery-unit lottery-unit-8"><img src="images/6.png"></td>
<td class="lottery-unit lottery-unit-7"><img src="images/8.png"></td>
<td class="lottery-unit lottery-unit-6"><img src="images/7.png"></td>
</tr>
计时器setTimeout方法中两个参数Part.2
};
lottery.timer = setTimeout(roll,lottery.speed);
}
roll：转盘滚动执行的方法；
lottey.speed：滚动的速度；
它的返回值timer是计时器实例，为了清除用。
clearTimeout(lottery.timer)。
如何快速看懂代码Part.3
我们可以运行代码后，在控制台上，打印中间结果。
这里显示抽中的算法思路Part.4
在转盘转到第50次，也就是转了5圈时使用随机数找到奖品，然后再让转盘转到那一个上面去。
这时设置红色背景色，提示奖品名称！
如何实现转动的时候先慢后快再到慢然后选中物品Part.5
最开始函数执行的时间间隔设置为100ms.开始运行；
每一次运行，就在原来的基础上减去10ms,直至到40ms；选出物拼后，每次累加20，最后一次加到110。
怎么实现抽奖后弹出你抽到的物品（换句话说：怎么实现一个耗时长的事件执行后执行下一个Part.6
计算好时间后，使用setTimeout定时器就可以。
怎么用js或jquery把函数b绑定到函数a之后执行Part.7
其实就是将函数b作为参数传入函数a，完成函数a之后执行。
//定义函数a
function a(callback){
alert("a要做的操作");
callback();//a执行完执行b
}
function b(){
alert("b要执行的操作");
}//定义函数a
function a(callback){
alert("a要做的操作");
callback();//a执行完执行b
}
function b(){
alert("b要执行的操作");
}
为什么要使用表格布局Part.8
因为表格就算你指定了宽高，它还是会自己调整的，自己内部会微调，指定表格主体，然后再指定里面每一个，就不会乱。
通过表格实现起来简单，不需要自己去过多的调整。
css
<style type="text/css">
#lottery{width:574px;height:584px;margin:20px auto 0;background:url(images/bg.jpg) no-repeat;padding:50px 55px;}
#lottery table td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999}
#lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}
#lottery table td.active{background-color:#ea0000;}
</style>
</head>
<body>
html
<div id="lottery">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="lottery-unit lottery-unit-0"><img src="images/1.png"></td>
<td class="lottery-unit lottery-unit-1"><img src="images/2.png"></td>
<td class="lottery-unit lottery-unit-2"><img src="images/4.png"></td>
<td class="lottery-unit lottery-unit-3"><img src="images/3.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-11"><img src="images/7.png"></td>
<td colspan="2" rowspan="2"><a href="#"></a></td>
<td class="lottery-unit lottery-unit-4"><img src="images/5.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-10"><img src="images/1.png"></td>
<td class="lottery-unit lottery-unit-5"><img src="images/6.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-9"><img src="images/3.png"></td>
<td class="lottery-unit lottery-unit-8"><img src="images/6.png"></td>
<td class="lottery-unit lottery-unit-7"><img src="images/8.png"></td>
<td class="lottery-unit lottery-unit-6"><img src="images/7.png"></td>
</tr>
</table>
</div>
Jq部分
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
var lottery = {
index: -1, //当前转动到哪个位置，起点位置
count: 0, //总共有多少个位置
timer: 0, //setTimeout的ID，用clearTimeout清除
speed: 20, //初始转动速度
times: 0, //转动次数
cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize: -1, //中奖位置
init: function (id) {
if ($("#" + id).find(".lottery-unit").length > 0) {
$lottery = $("#" + id);
$units = $lottery.find(".lottery-unit");
this.obj = $lottery;
this.count = $units.length;
$lottery.find(".lottery-unit-" + this.index).addClass("active");
};
},
roll: function () {
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find(".lottery-unit-" + index).removeClass("active");
index += 1;
if (index > count - 1) {
index = 0;
};
$(lottery).find(".lottery-unit-" + index).addClass("active");
this.index = index;
return false;
},
stop: function (index) {
this.prize = index;
return false;
}
};
function roll(){
lottery.times += 1;
lottery.roll();
if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
alert(lottery.prize+"A");
clearTimeout(lottery.timer);
lottery.prize=-1;
lottery.times=0;
click=false;
}else{
if (lottery.times<lottery.cycle) {
lottery.speed -= 10;
}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==7) || lottery.prize==lottery.index+1)) {
lottery.speed += 110;
}else{
lottery.speed += 20;
}
}
if (lottery.speed<40) {
lottery.speed=40;
};
lottery.timer = setTimeout(roll,lottery.speed);
}
return false;
}
var click=false;
window.onload=function(){
lottery.init('lottery');
$("#lottery a").click(function(){
if (click) {
return false;
}else{
lottery.speed=100;
roll();
click=true;
return false;
}
});
};
</script>
</body>
</html>
总结
关于“ 如何用jQuery写个抽奖转盘 ”的内容就介绍到这，感谢各位的阅读。
大家不妨亲自试一试，在此基础上根据自己的需求改造一番~
