你好~ ITer！
这里是每周二周三陪你技术内卷的小山谷！
作为前端开发工程师，相信大家都做过一些小游戏程序，比如贪吃蛇，五子棋，猜拳等等！今天给大家分享一下如何做彩票大富翁！-源代码附在文末。
算法思想:
垄断是一个圆形转盘，所以必须转换成线性；
当你点击开始直到旋转停止时，在停止的方块上加一个红色的hit背景提示中奖；
使用计时器来控制转盘的速度。
最终转台效果图:
在页面布局Part.1底部放一张背景图，是表格布局——横向布局；
每行有四个单元格，中间两行有两个。中间空出来放按钮。
& lttr & gt& lttdclass = & # 34彩票单位彩票单位0 & # 34；& gt& ltimgsrc = & # 34images/1 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元1 & # 34；& gt& ltimgsrc = & # 34images/2 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元2 & # 34；& gt& ltimgsrc = & # 34images/4 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元3 & # 34；& gt& ltimgsrc = & # 34images/3 . png & # 34；& gt& lt/TD & gt；& lt/tr & gt；& lttr & gt& lttdclass = & # 34彩票单元彩票单元11 & # 34；& gt& ltimgsrc = & # 34images/7 . png & # 34；& gt& lt/TD & gt；& lttdcolspan = & # 342"rowspan = & # 342"& gt& ltahref = & # 34#"& gt& lt/a & gt；& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元4 & # 34；& gt& ltimgsrc = & # 34images/5 . png & # 34；& gt& lt/TD & gt；& lt/tr & gt；& lttr & gt& lttdclass = & # 34彩票单元彩票单元10 & # 34；& gt& ltimgsrc = & # 34images/1 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元5 & # 34；& gt& ltimgsrc = & # 34images/6 . png & # 34；& gt& lt/TD & gt；& lt/tr & gt；& lttr & gt& lttdclass = & # 34彩票单元彩票单元9 & # 34；& gt& ltimgsrc = & # 34images/3 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元8 & # 34；& gt& ltimgsrc = & # 34images/6 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元7 & # 34；& gt& ltimgsrc = & # 34images/8 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元6 & # 34；& gt& ltimgsrc = & # 34images/7 . png & # 34；& gt& lt/TD & gt；& lt/tr & gt；Part.2}，timer setTimeout方法中的两个参数；lottery.timer = setTimeout(roll，lottery . speed)；}滚动:转盘滚动的方法；
Lottey.speed:滚动的速度；
它的返回值timer是一个timer实例，用于清零。
clearTimeout(lottery.timer).
如何快速理解代码部分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 functiona(callback){ alert(& # 34；一该怎么办& # 34；);回调()；//a执行完b } function b(){ alert(& # 34；b要执行的操作& # 34；);}//定义函数a functiona(callback){ alert(& # 34；一该怎么办& # 34；);回调()；//a执行完b } function b(){ alert(& # 34；b要执行的操作& # 34；);}为什么要用表格布局Part.8因为即使你指定了表格的宽度和高度，它还是会自己调整的，而且是内部微调，指定了表格的主体，再在里面指定每一个，这样就不会乱了。
通过表格实现很简单，不需要自己做太多调整。
钢性铸铁
& ltstyletype = & # 34text/CSS & # 34；& gt#彩票{宽度:574px身高:584px边距:20pxauto0背景:url(images/bg.jpg)无重复；填充:50 px 55 px；} # lottery tabletd { width:142 px；身高:142px文本对齐:居中；垂直对齐:居中；字体大小:24px颜色:# 333；font-index:-999 } # lotterytabledta { width:284 px；身高:284px行高:150像素；显示:块；文字-装饰:无；} # lottery tabletd . active { background-color:# ea 0000；} & lt/style & gt；& lt/head & gt；& ltbody & gt超文本标记语言
& ltdivid = & # 34彩票& # 34；& gt& lttableborder = & # 340"cellpadding = & # 340"单元格间距= & # 34；0"& gt& lttr & gt& lttdclass = & # 34彩票单位彩票单位0 & # 34；& gt& ltimgsrc = & # 34images/1 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元1 & # 34；& gt& ltimgsrc = & # 34images/2 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元2 & # 34；& gt& ltimgsrc = & # 34images/4 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元3 & # 34；& gt& ltimgsrc = & # 34images/3 . png & # 34；& gt& lt/TD & gt；& lt/tr & gt；& lttr & gt& lttdclass = & # 34彩票单元彩票单元11 & # 34；& gt& ltimgsrc = & # 34images/7 . png & # 34；& gt& lt/TD & gt；& lttdcolspan = & # 342"rowspan = & # 342"& gt& ltahref = & # 34#"& gt& lt/a & gt；& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元4 & # 34；& gt& ltimgsrc = & # 34images/5 . png & # 34；& gt& lt/TD & gt；& lt/tr & gt；& lttr & gt& lttdclass = & # 34彩票单元彩票单元10 & # 34；& gt& ltimgsrc = & # 34images/1 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元5 & # 34；& gt& ltimgsrc = & # 34images/6 . png & # 34；& gt& lt/TD & gt；& lt/tr & gt；& lttr & gt& lttdclass = & # 34彩票单元彩票单元9 & # 34；& gt& ltimgsrc = & # 34images/3 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元8 & # 34；& gt& ltimgsrc = & # 34images/6 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元7 & # 34；& gt& ltimgsrc = & # 34images/8 . png & # 34；& gt& lt/TD & gt；& lttdclass = & # 34彩票单元彩票单元6 & # 34；& gt& ltimgsrc = & # 34images/7 . png & # 34；& gt& lt/TD & gt；& lt/tr & gt；& lt/table & gt；& lt/div & gt；Jq部分
& ltscriptsrc = & # 34jquery-1 . 8 . 3 . min . js & # 34；type = & # 34文本/JavaScript & # 34；& gt& lt/script & gt；& ltscripttype = & # 34文本/JavaScript & # 34；& gtVarlottery={index:-1，//当前旋转的位置在哪里，起始位置是count:0，//总共有多少个位置？Timer: 0，//timer:0，//setTimeout，clear speed:20，//初始转速次数:0，//旋转次数周期:50，//基本转数:即需要旋转多少次才能进入抽奖奖品:-1，//中奖位置init:function(id){ if($(& # 34；#"+id)。查找(& # 34；。彩票单位& # 34；).长度& gt0){ $彩票= $(& # 34；#"+id)；$ units = $ lottery . find(& # 34；。彩票单位& # 34；);this.obj = $彩票；this . count = $ units . length；$ lottery . find(& # 34；。彩票单位-& # 34；+this.index)。addClass(& # 34；活跃& # 34；);};}，roll:function(){ varindex = this . index；varcount = this.countvarlottery = this.obj$(抽奖)。查找(& # 34；。彩票单位-& # 34；+索引)。remove class(& # 34；活跃& # 34；);index+= 1；if(index & gt；count-1){ index = 0；};$(抽奖)。查找(& # 34；。彩票单位-& # 34；+索引)。addClass(& # 34；活跃& # 34；);this.index = index返回false；}，stop:function(index){ this . prize = index；返回false；}};function roll(){ lottery . times+= 1；lottery . roll()；if(lottery . times & gt；lottery . cycle+10 & & lottery . prize = = lottery . index){ alert(lottery . prize+& # 34；一& # 34；);clear time out(lottery . timer)；lottery . prize =-1；lottery . times = 0；点击=假；} else { if(lottery . times & lt；lottery . cycle){ lottery . speed-= 10；} else if(lottery . times = = lottery . cycle){ varindex = math . random()*(lottery . count)| 0；lottery.prize =索引；} else { if(lottery . times & gt；lottery . cycle+10 & &((lottery . prize = = 0 & & lottery . index = = 7)| | lottery . prize = = lottery . index+1)){ lottery . speed+= 110；} else { lottery . speed+= 20；} } if(lottery . speed & lt；40){ lottery . speed = 40；};lottery.timer=setTimeout(roll，lottery . speed)；}返回false；} varclick = falsewindow . onload = function(){ lottery . init(& # 39；彩票& # 39；);$("#彩票& # 34；).click(function(){ if(click){ return false；} else { lottery.speed = 100roll()；点击=真；返回false；}});};& lt/script & gt；& lt/body & gt；& lt/html & gt；总结一下关于“如何用jQuery写一个彩票转盘”的内容在这里。感谢您的阅读。
不妨自己试一试，在此基础上根据自己的需求进行改造~
温馨提示：注：内容来源均采集于互联网，不要轻信任何，后果自负，本站不承担任何责任。若本站收录的信息无意侵犯了贵司版权，请给我们来信(j7hr0a@163.com)，我们会及时处理和回复。
原文地址"抽奖html代码，jquery 抽奖"：http://www.guoyinggangguan.com/xedk/244138.html。
微信扫描二维码关注官方微信
▲长按图片识别二维码
