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