需求：

最多可以抽奖5次，而且，每次只会中"2000元理财金"或者"谢谢参与",其它的不会抽中（哈哈，果然都是套路)。

效果如下：

一、页面结构：

H2您已拥有span class='playnum'/span次抽奖机会，点击立刻抽奖！~/H2 div=' g-乐透-box ' div class=' g-乐透-img '/div a class=' play TN ' href=' JavaScript 3:'rel='外部nofollow' rel='外部nofollow' title='开始抽奖/a/部门/部门/部门标签氘为提示内容，playnum是剩余抽奖次数，g-彩票-img是最外层的闪灯，g-彩票-img是转动的内容，播放是点击抽奖按钮。

这里用的是jquery.rotate.js，所以要引入jquery然后引入jquery.rotate.js，百度一下很简单的，没几个AIP。

二、简单的样式：

风格g .含量{宽度： 100%;背景# fbe3ccheight: auto字体系列： '微软雅黑、'微软雅黑；} .g-内容g .彩票盒{ width : 500 pxmargin : 0 auto飞越：隐藏；} .g-内容。彩票箱g-左H2 { font-size : 20px；线高： 32px字体粗细：正常；左边距left: 20px}。g-内容。彩票箱g .左{宽度： 450像素向左浮动：} .g-彩票箱{宽度： 400像素高度： 400像素；左边距左： 30px相对位置：背景：网址(ly-plate-c.gif)不重复；} .彩票盒g .彩票-img { width : 340 px；高度： 340像素相对位置：背景：网址(bg-lottery.png)不重复；left: 30pxtop: 30px}。彩票盒播放长度{宽度： 186像素高度： 186像素；绝对位置：前：名50%；左侧： 50%;左边距：-94px；边距-top :-94px；后台： URL(playn。巴布亚新几内亚)不重复；}/样式样式就定一下高度，居中一下，显示一下背景图片

三、JS代码：

script $(function() { var $btn=$(')。g-彩票-img’；//旋转div var playnum=5；//初始时间，$('。playnum’)。html(playnum)是从后台导入的；//显示还剩多少抽奖机会。var为真=0；//你是在抽var click func=function(){ var data=[1，2，3，4，5，6]？//彩票//数据是随机的结果。根据概率后的结果，数据=数据[数学。地板(数学。random () *数据。长度)]；//1 ~ 6的随机数开关(数据){case 1: rotate func (1，0，'恭喜拿到2000元理财')；打破；案例2: rotateFunc(2，0，'恭喜拿到2000元理财2 ')；打破；案例3: rotateFunc(3，0，'恭喜理财3中拿到2000元')；打破；案例4: rotateFunc(4，-60，'感谢您的参与4 ')；打破；案例5: rotateFunc(5，120，'感谢您的参与5 ')；打破；案例6: rotateFunc(6，120，'感谢您的参与6 ')；打破；} } $('.playtn’)。单击(function(){ if(isture)return；//如果正在执行，exit isture=true//如果(playnum=0)则标记为执行{//当彩票号码为0(“无号码”)时执行提醒；$('.playnum’)。html(0)；//时间显示为0 isture=false} else {//如果次数较多，执行playnum=playnum-1；//执行转盘时，次数减少1 if(playnum=0){ playnum=0；} $('.playnum’)。html(playnum)；click func()；} });var rotateFunc=函数(奖励、角度、文本){ isture=true$ BTN . stop rotate()；$btn.rotate({ angle: 0，//旋转角度数持续时间3360 4000，//旋转时间animateTo:角度1440，//给定角度，让它旋转回调3360函数(){ isture=false//执行后标志为alert(文本)；} });};});归根结底，/script使用一个1~6的随机数，然后将对应的角度值发送给jquery.rotate.js，就会传递到对应的地方。最后，它判断并修改相应的剩余时间。

最后，所有代码是：

！DOCTYPE html html head meta charset=' utf-8 '/title抽奖/title meta name=' keywords ' content=' meta name=' description ' content=' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' meta name=' renderer ' content=' web kit ' style .g-含量{宽度： 100%;背景# fbe3ccheight: auto字体系列： '微软雅黑、'微软雅黑；} .g-内容g .彩票盒{ width : 500 pxmargin : 0 auto飞越：隐藏；} .g-内容。彩票箱g-左H2 { font-size : 20px；线高： 32px字体粗细：正常；左边距left: 20px}。g-内容。彩票箱g .左{宽度： 450像素向左浮动：} .g-彩票箱{宽度： 400像素高度： 400像素；左边距左： 30px相对位置：背景：网址(ly-plate-c.gif)不重复；} .彩票盒g .彩票-img { width : 340 px；高度： 340像素相对位置：背景：网址(bg-lottery.png)不重复；left: 30pxtop: 30px}。彩票盒播放长度{宽度： 186像素高度： 186像素；绝对位置：前：名50%；左侧： 50%;左边距：-94px；边距-top :-94px；后台： URL(playn。巴布亚新几内亚)不重复；}/style/head dydiv class=' g-content ' div class=' g-lotch-case ' div class=' g-left ' H2您已拥有span class='playnum'/span次抽奖机会，点击立刻抽奖！~/H2 div=' g-乐透-box ' div class=' g-乐透-img '/div a class=' play TN ' href=' JavaScript 3:rel='外部nofollow' rel='外部nofollow' title='开始抽奖/a/div/div/div脚本src=' http :3358 libs。百度。com/jquery/2。1 .4/jquery。量滴js '/script脚本类型=' text/JavaScript ' src=' http : jsmin/jquery。旋转。量滴js '/script script $(function(){ var $ BTN=$().g-彩票-img '；//旋转的div var playnum=5；//初始次数，由后台传入$('.playnum’).html(playnum)；//显示还剩下多少次抽奖机会var isture=0；//是否正在抽奖var click func=func(){ var data=[1，2，3，4，5，6]；//抽奖//数据为随机出来的结果，根据概率后的结果数据=数据[数学。地板(数学。random()*数据。长度)]；//1~6的随机数开关（数据){ case 1: rotateFunc(1，0，'恭喜您获得2000元理财金');打破；案例2:旋转数控(2，0 ')恭喜您获得2000元理财金2');打破；案例3:旋转数控(3，0 ')恭喜您获得2000元理财金3');打破；案例4: rotateFunc(4，-60 ')谢谢参与4');打破；案例5: rotateFunc(5，120 '谢谢参与5');打破；案例6: rotateFunc(6，120 '谢谢参与6');打破；} } $('.playn’).单击(function(){ if(isture)return；//如果在执行就退出isture=true//标志为在执行if(playnum=0) { //当抽奖次数为0的时候执行警报('没有次数了');$('.playnum’).html(0)；//次数显示为0 isture=false} else { //还有次数就执行playnum=playnum-1；//执行转盘了则次数减1 if(playnum=0){ playnum=0；} $('.playnum’).html(playnum)；单击func()；} });var rotateFunc=函数（奖励、角度、文本){ isture=true$ BTN。停止旋转()；$btn.rotate({ angle: 0，//旋转的角度数duration: 4000，//旋转时间动画： 角度1440,//给定的角度，让它根据得出来的结果加上1440度旋转回拨：函数(){ isture=false//标志为执行完毕警报（文本);} });};});/脚本/正文/html所需要的图片（这里好像上传不了压缩文件，所以不能整个打包上传了):

#复制下面的图片名称-鼠标移到图片上-右键-图片另存为-粘贴保存#

1.最外面的闪灯：ly-plate-c.gif

2.六个获奖项目：bg-lottery.png

3.点击抽奖按钮：playbtn.png

摘要

以上是jquery.rotate.js实现自选抽奖次数和中奖内容的转盘抽奖码，由边肖为大家介绍。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！