jquery实现转盘抽奖
一、总结
一句话总结：这里环形转盘，环形的东西可以化成线性的，然后访问到哪个，给他加上背景为红的样式，用定时器开控制转盘的速度，函数执行的时间间隔越小，就运动的越快。
1、如何实现类似9宫格形式抽奖盘的样式？
背景图加上表格布局
2、在表格实现类似9宫格形式抽奖盘的样式的时候，最中间的开始抽奖占据的2*2如何留出来？
<td colspan="2" rowspan="2"><a href="#"></a></td>
用的是colspan和rowspan，里面放a标签做点击开始抽奖的事件之用，a标签里面不用放东西，显示的内容是背景图里面的开始抽奖
3、setTimeout()方法常用两个参数是什么意思？
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout(roll,lottery.speed);
4、settimeout的返回值？
返回数值id，整型，可用于 取消 setTimeout 设置的函数clearTimeout(id)。也就是这个setTimeout的唯一标示符。
示例：
var st=setTimeout(function,time);
clearTimeout(st)；
结果：取消定时器
这就是其返回值的作用，即作为一个引用，指向setTimeout
189 lottery.timer = setTimeout(roll,lottery.speed); //lottery.speed毫秒后执行roll方法，所以这里也算是递归啦
164 clearTimeout(lottery.timer); //清除设置的timeout，也就是转盘停下来
5、| 这个运算符是什么意思？
unsigned char a=5,b=11;
5 == 0000 0101 (二进制)
10== 0000 1011
a | b== 0000 1111
| 是把某两个数中, 只要其中一个的某一位为1，则结果的该位就为1；
& 相反
173 }else if(lottery.times==lottery.cycle) { //基础次数到了，确定奖品，但是后面还要转到奖品这去
174 var index = Math.random()*(lottery.count)|0; //随机数确定奖品是哪一个
175 lottery.prize = index; 6、如何快速看懂代码？
打印中间结果可以很快看懂
7、抽奖的算法思路是？
在第50次的时候用随机数找到奖品，然后再让转盘转到那一个上面去
8、如何实现转动的时候先慢后快，然后再慢，然后选到物品？
最开始函数执行的时间间隔 设置为100ms，然后运行的话每次-10，直到捡到40，然后选出来物品后，时间间隔开始加，每次累加+20，最后一次+110
9、抽奖完成之后弹出你抽到的物品，怎么实现（怎么实现在一个耗时长的事件执行完之后执行下一个）？
这里算好时间，用的setTimeout定时器
213 function reportRewardAnswer(str){
214 setTimeout(function(){
215 $.giftWarm("恭喜你抽中了",'<span>'+str+'</span>个金豆');
216 },600);
217 }10、怎么用js或jquery把一个函数b绑定到另一个函数a之后执行（并没有什么用，但是可以体会回调）？
简单的说：就是将函数b作为参数传入函数a，完成函数a之后执行。
//定义函数afunction a(callback){ alert("a要做的操作"); callback();//a执行完执行b}function b(){ alert("b要执行的操作");}简单的说：就是将函数b作为参数传入函数a，完成函数a之后执行。
11、为什么用表格布局很难受？
因为表格就算你指定了宽高，它还是会自己调整的，自己内部会微调，
指定表格主体，然后再指定里面每一个，就不会乱
二、jquery实现转盘抽奖
1、截图
2、代码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>转盘抽奖游戏代码 - 源码之家</title> <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{
padding: 0px;
margin: 0px;
width:142px;
height:142px;
text-align:center;
vertical-align:middle;
color:#333;
border-width: 0px;
}
#lottery table td img{
width:142px;
height:136px;
}
#lottery table td a{
width:284px;
height:284px;
line-height:150px;
display:block;
text-decoration:none;
}
#lottery table td.active{
background-color:#ea0000;
}
#lottery table tr{
height: 142px;
}
.reward_info{
width: 100%;
height: 100%;
z-index: 1000;
display: flex;
position: fixed;
right: 0;
left: 0;
top: 0;
margin: auto;
background-color: rgba(0,0,0,0.4);
display: flex;
text-align: center; } .reward_info_box{
border-radius: .6rem;
background-color: #fff;
width: 80%;
margin:400px auto 0;
height: 500px;
} .reward_info_img{
background:url(images/compound-warm-img.png) no-repeat;
width: 720px;
height: 556px;
background-size: 100% 100%;
margin: -258px auto 0;
/*position: absolute;*/ } .reward_info_btn > button{
/*background: #f00;*/
width: 150px;
border-radius:10px;
background: #ff9000;
color: #fff;
font-size: 24px;
font-weight: bolder;
text-align: center;
vertical-align:middle;
padding-top: 5px;
padding-bottom: 7px;
} </style> </head>
<body> <div id="lottery">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="lottery-unit lottery-unit-0"><img src="data:images/1.png"></td>
<td class="lottery-unit lottery-unit-1"><img src="data:images/2.png"></td>
<td class="lottery-unit lottery-unit-2"><img src="data:images/4.png"></td>
<td class="lottery-unit lottery-unit-3"><img src="data:images/3.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-11"><img src="data:images/7.png"></td>
<td colspan="2" rowspan="2"><a href="#"></a></td>
<td class="lottery-unit lottery-unit-4"><img src="data:images/5.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-10"><img src="data:images/1.png"></td>
<td class="lottery-unit lottery-unit-5"><img src="data:images/6.png"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-9"><img src="data:images/3.png"></td>
<td class="lottery-unit lottery-unit-8"><img src="data:images/6.png"></td>
<td class="lottery-unit lottery-unit-7"><img src="data:images/8.png"></td>
<td class="lottery-unit lottery-unit-6"><img src="data:images/7.png"></td>
</tr>
</table>
</div> <script type="text/javascript" src="jquery-1.8.3.min.js"></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"); //设置抽奖开始的初始位置（用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) { //这里是转盘停下来，超过基础转数10次以上，并且index指到那个奖品就停下来
clearTimeout(lottery.timer); //清除设置的timeout，也就是转盘停下来
lottery.prize=-1; //奖品初始化为-1
lottery.times=0; //已经转动次数初始化为0
click=false; //开始转动了，让点击变的不可点击
//alert(lottery.index);
reportRewardAnswer(lottery.index);
}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{ //当转动次数达到转动基本次数后
//(lottery.prize==0 && lottery.index==7) 这句话的意思是如果随机数是0，那么奖品就是是第一个，从7的位置就开始+110毫秒，后面都是加20ms
//(lottery.prize==0 && lottery.index==7) 没有这句话的话，因为这个是环，不好判断0的前一个，所以这里用了特例判断
if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
lottery.speed += 110; //变慢很多点，这是最后那一次累加的110毫秒
}else{
lottery.speed += 20; //变慢一点点
}
}
if (lottery.speed<40) { //设置最小的函数执行事件间隔，也就是设置最大的转速
lottery.speed=40;
};
//console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize+'^^^^^^^'+lottery.index);
lottery.timer = setTimeout(roll,lottery.speed); //lottery.speed毫秒后执行roll方法，所以这里也算是递归啦
}
return false;
} var click=false; window.onload=function(){
//reportRewardAnswer(lottery.index);
lottery.init('lottery'); //对象的方法
$("#lottery a").click(function(){
if (click) {
return false;
}else{
lottery.speed=100;
roll();
click=true;
return false;
}
});
}; function reportRewardAnswer(str){
setTimeout(function(){
$.giftWarm("恭喜你抽中了",'<span>'+str+'</span>个金豆');
},600);
} jQuery.extend({
giftWarm : function(b, a) {
$("body")
.append(
'<div id="reward_info" class="reward_info"> <div class="reward_info_box"><div class="reward_info_img"></div><h3>'
+ b
+ "</h3><h3>"
+ a
+ '</h3> <div class="reward_info_btn"><button>\u786e\u5b9a</button></div></div></div>');
$(".reward_info").click(function() {
$(this).remove()
})
}
}); </script> </body>
</html>