js幸运大转盘开发
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js幸运大转盘开发相关的知识，希望对你有一定的参考价值。
最终效果实例下载：http://www.oschina.net/code/snippet_2352644_54997
一.大转盘准备工作
网上的一个抽奖大转盘实例http://www.jq22.com/yanshi2252
这就是我们要开发的效果，不过我们是让指针转，我们先分析这个效果：
-
结构有2部分，上面是指针背景图，下面是奖项图
-
点击指针元素开始抽奖，会转动一定圈数停下来
-
停下来的位置指针指使那个奖项，就会弹出获奖信息提示
这是参考效果，我们分析自己的大概实现：
-
同样上下2部分
-
点击指针转动，不过是指针动
-
转动一定圈数停止
-
根据指向弹出获奖信息
-
设置抽奖次数，假如只能三次
-
设置不同奖项中奖概率
在最后我们在写一个九宫格大转盘
二.如何转起来
转就是css3的2d旋转处理，css3就不写了，看下面。
三.静态结构搭建
问题出现了，那就是两张图，一个奖项图，一个指针图，不能设计不可怕，我们直接把参考效果的扒取下来就好了，省略下载操作，我们已经有图了，请下载。
back.png
pointer.png
书写我们的静态结构，背景图目录看css设置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<html><head> <meta charset="utf-8"> <title>幸运大转盘抽奖</title> <style type="text/css">/*reset*/*{ padding:0; margin:0}body{ height: 100%; width: 100%; font-size:12px; color:#333;}ul{ list-style:none;}/*demo*/#box{ width:531px; height:531px; margin:50px auto;position:relative; background:url(images/back.png) no-repeat left top;}#zhizhen{ width:174px; height:228px; position:absolute;background:url(images/pointer.png) no-repeat left top; left:178.5px; z-index:999; cursor:pointer; top:132.5px;transform-origin:87px 133px;}#zhizhen{animation:animations 2s linear infinite forwards;transform:rotate(0deg);}@keyframes animations{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}</style></head><body> <!--幸运大转盘抽奖--> <div id="box"> <div id="zhizhen"></div> </div></body>window.onload=function(){ //幸运大转盘抽奖 };</script></html> |
一个基于css3动画配合2d变化的旋转指针就出现了，下面我们将分析top ，left，旋转圆心为何如此设置的。
四.静态结构重要样式分析
红线的就是最核心样式，首先是top和left的设置：
这不需要太多解释吧，篮框就是我们指针，我们摆正后测量就可以了，
注意：一定要1px无偏差摆正，不然旋转时就跑偏了！
我们把指针已经放在中心位置，因为图不是正方形，需要具体测量，可见把指针处理为正方形会大大简化我们的处理。
这就是旋转圆心位置，指针是非正方形，我们的测量位置就是在中心圆中心，不过y要加上偏差。
什么是旋转圆心？我们在桌子上摆好一个日记本，然后按住一个点，日记本转动，按住的点就是圆心。
为了测试是否可以不跑偏的转动，我们结合动画进行测试。
五.利用js开始转起来
我们利用动画已经不停的转了起来，利用js我们如何转动？
一说到js，还说到动，我们要瞬间想到setInterval函数，我们利用间隔函数，动态的不断修改2d变化旋转的角度大小，就可以转起来了，我们同样加入事件的处理，点击后触发转动：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>幸运大转盘抽奖</title> <style type="text/css">/*reset*/*{ padding:0; margin:0}body{ height: 100%; width: 100%; font-size:12px; color:#333;}ul{ list-style:none;}/*demo*/#box{ width:531px; height:531px; margin:50px auto;position:relative; background:url(images/back.png) no-repeat left top;}#zhizhen{ width:174px; height:228px; position:absolute;background:url(images/pointer.png) no-repeat left top; left:178.5px; z-index:999; cursor:pointer; top:132.5px;transform-origin:87px 133px;transform:rotate(0deg);}</style></head><body> <!--幸运大转盘抽奖--> <div id="box"> <div id="zhizhen"></div> </div></body><script type="text/javascript">window.onload=function(){ //幸运大转盘抽奖 //获得指针元素 var zhizhen=document.getElementById("zhizhen"); //存放间隔动画id，用来清除运动 var dbox=null; //间隔动画所用时间，表示转动快慢 var dtime=2; //角度，和css设置对应,初始为0 var deg=0; //变化增量 var cc=2; //监听点击事件 zhizhen.onclick=function(){ dbox=setInterval(dong,dtime); }; function dong(){ deg+=cc; zhizhen.style.transform="rotate(" + deg + "deg)"; } };</script></html> |
六.转动一定角度后停止
我们知道，转一定圈数后，是要停止的，停止的位置根据指向，会弹出中奖信息提示，先说转，我们是从0一直增加，一说停止肯定是到一个角度不动了，假如是1460角度停止。
换算成圈数就是360度*4圈 +20度，就是赚了4圈多20度。
既然是停止，我们只要到1460时清除间隔函数就可以了，clearInteval的使用，传入间隔id。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>幸运大转盘抽奖</title> <style type="text/css">/*reset*/*{ padding:0; margin:0}body{ height: 100%; width: 100%; font-size:12px; color:#333;}ul{ list-style:none;}/*demo*/#box{ width:531px; height:531px; margin:50px auto;position:relative; background:url(images/back.png) no-repeat left top;}#zhizhen{ width:174px; height:228px; position:absolute;background:url(images/pointer.png) no-repeat left top; left:178.5px; z-index:999; cursor:pointer; top:132.5px;transform-origin:87px 133px;transform:rotate(0deg);}</style></head><body> <!--幸运大转盘抽奖--> <div id="box"> <div id="zhizhen"></div> </div></body><script type="text/javascript">window.onload=function(){ //幸运大转盘抽奖 //获得指针元素 var zhizhen=document.getElementById("zhizhen"); //存放间隔动画id，用来清除运动 var dbox=null; //间隔动画所用时间，表示转动快慢 var dtime=2; //角度，和css设置对应,初始为0 var deg=0; //变化增量 var cc=2; //停止时的角度 var stopdeg=1460; //监听点击事件 zhizhen.onclick=function(){ dbox=setInterval(dong,dtime); }; function dong(){ deg+=cc; if(deg>stopdeg){ clearInterval(dbox); }else{ zhizhen.style.transform="rotate(" + deg + "deg)"; }; } };</script></html> |
六.停止角度转为圈数+角度
我们上面也提到了1460就是4圈+20度，这个停止角度如此表示之后
|
1
2
3
4
5
6
|
//旋转基本圈数 var quan=4; //多余角度 var odeg=20; //停止时的角度 var stopdeg=quan*360+odeg; |
采用这种设置以后，我们可以自定义旋转圈数，比如基本圈数是6圈，同样停止额外角度也可自定义，比如是80度：
|
1
2
3
4
5
6
|
//旋转基本圈数 var quan=6; //多余角度 var odeg=80; //停止时的角度 var stopdeg=quan*360+odeg; |
下面是修改后的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>幸运大转盘抽奖</title> <style type="text/css">/*reset*/*{ padding:0; margin:0}body{ height: 100%; width: 100%; font-size:12px; color:#333;}ul{ list-style:none;}/*demo*/#box{ width:531px; height:531px; margin:50px auto;position:relative; background:url(images/back.png) no-repeat left top;}#zhizhen{ width:174px; height:228px; position:absolute;background:url(images/pointer.png) no-repeat left top; left:178.5px; z-index:999; cursor:pointer; top:132.5px;transform-origin:87px 133px;transform:rotate(0deg);}</style></head><body> <!--幸运大转盘抽奖--> <div id="box"> <div id="zhizhen"></div> </div></body><script type="text/javascript">window.onload=function(){ //幸运大转盘抽奖 //获得指针元素 var zhizhen=document.getElementById("zhizhen"); //存放间隔动画id，用来清除运动 var dbox=null; //间隔动画所用时间，表示转动快慢 var dtime=2; //角度，和css设置对应,初始为0 var deg=0; //变化增量 var cc=2; //旋转基本圈数 var quan=6; //多余角度 var odeg=80; //停止时的角度 var stopdeg=quan*360+odeg; //监听点击事件 zhizhen.onclick=function(){ dbox=setInterval(dong,dtime); }; function dong(){ deg+=cc; if(deg>stopdeg){ clearInterval(dbox); }else{ zhizhen.style.transform="rotate(" + deg + "deg)"; }; } };</script></html> |
六.奖项依据
还是上面的延续，我们设置是6圈+80度，其实6圈我们不用考虑，只是让用户感觉在抽奖的假象，这个80才是我们真实考虑的东西，因为他代表在转盘上指针停在了哪里，要通过停在的位置弹出获奖信息：
80度的位置和其实参考如图所示。
毫无疑问，0-6这7个奖项在0-360之间各占一定的区间，我们需要测量出来，例如：
0等奖：0-50度
6等奖：51-101度 等等一次类推
我们选择的图毫无疑问是失败的，若果是6等分，我们直接就算出来了（360*6），可是7份（360/7尴尬）的就要实际测量：
|
1
2
3
4
5
6
7
8
9
10
|
//区间奖项 var jiang=[ [1,51,"未中奖"], //未中奖 [52,102,"6等奖"],//6等奖 [103,153,"5等奖"],//5等奖 [154,203,"4等奖"],//4等奖 [204,251,"3等奖"],//3等奖 [252,307,"2等奖"],//2等奖 [307,360,"1等奖"]//1等奖 ]; |
我们奖项和角度对应关系，我们现在是80度，那么就是6等奖
六.奖项判断
我们会在80度位置停止，我们的依据就是上面的数组，我们要写一个判定函数，去自动判断是几等奖，这样就非常的方便了，我们把80改为150也许自己判定结果。
|
1
2
3
4
5
6
7
8
9
10
|
//奖项判定函数 function is(deg){ var res="未中奖"; for(var i=0;i<jiang.length;i++){ if(deg>=jiang[i][0] && deg<jiang[i][1]){ res=jiang[i][2]; }; }; return res; }; |
我们在停止时弹出提示
|
1
2
3
4
5
6
|
if(deg>stopdeg){ clearInterval(dbox); alert(is(odeg)); }else{ zhizhen.style.transform="rotate(" + deg + "deg)"; }; |
修改后全部代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>幸运大转盘抽奖</title> <style type="text/css">/*reset*/*{ padding:0; margin:0}body{ height: 100%; width: 100%; font-size:12px; color:#333;}ul{ li |
以上是关于js幸运大转盘开发的主要内容，如果未能解决你的问题，请参考以下文章
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现