funny

jQuery实现的轮盘抽奖

微信公众号的大转盘抽奖效果

用到的资源可以去我的githup下载

实现后的效果如下图

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>抽奖</title>
<link href="style/index.css" rel="stylesheet" type="text/css" />
<script src="js/index.js"></script>
</head>

<body>
<div class="lotteryBox">
	<div class="plateBox"></div>
	<div class="handBox"></div>
</div>
</body>
</html>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@charset "utf-8";
/* CSS Document */
.lotteryBox{ 
    position:relative;
}
.plateBox{ 
    width:500px; 
    height:500px; 
    background:url(../img/plate.png) no-repeat;
}
.handBox{ 
    width:500px; 
    height:500px; 
    background:url(../img/hand.png) no-repeat; 
    position:absolute; 
    top:0px; 
    left:0px;
}

js

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/*
每天抽奖次数限制

*/
var haveprize=0;
$(function(){
	$(".plateBox").css("transform-origin","50% 50%");
	$(".plateBox").css("transform","rotate(0deg)");
	//添加抽奖事件
	addevent();
	
})
/*开始抽奖函数，参数为中奖编号*/
function plateBoxPlay(code){
	deleteevent();//暂时删除抽奖事件
	//设置角度间隔
	var $plateBox=$(".plateBox");
	var angle=360/8;
	var thiscode=code-1;
	//生成随机圈数
	var number_turns=Math.ceil(Math.random()*5);
	//获取修正角度
	var thisspare=getdeg($plateBox)%360;
	//计算旋转角度
	var this_turns=parseInt(number_turns*360-thiscode*angle-thisspare);
	//调用动画
	play_animate($plateBox,this_turns,code);
}
//获取当前转盘角度
function getdeg($box){
	var style=$box[0].style.transform;
	console.log(style);
	//角度取值
	var thisdeg=parseInt(style.match(/rotate\(([^)]+)\)/)[1]);
	return thisdeg;
}
//抽奖动画
function play_animate($box,turns,code){
	//动画初始化
	var thisdeg=getdeg($box);
	var targetturns=thisdeg+turns;
	
	var timer=setInterval(function(){
			var thisdeg=getdeg($box);
			//设置速度
			var speed=Math.ceil((targetturns-thisdeg)/10);
			//本次旋转角度
			var playdeg=thisdeg+speed;
			//设置角度
			$box.css("transform","rotate("+playdeg+"deg)");
			//console.log(playdeg);
			//判定结束
			if(thisdeg>=targetturns){
				clearInterval(timer);
				alert("您抽中了"+code+"等奖！");
				addevent();//重新添加抽奖事件
			}
		},100);


}
//添加事件
function addevent(){
	$(".handBox").on("click",function(){
		//设置抽奖次数，0为不限次
		var runnumber=0;
		if(runNumb(runnumber)){
			//执行抽奖函数
			plateBoxPlay(prize());
		}else{
			alert("对不起！您今天已经抽了"+runnumber+"次了，请明天再试！");
		}
		
	})
}
//删除事件
function deleteevent(){
	$(".handBox").off("click");
}

//每天限制次数函数，参数为限制的次数
function runNumb(nmb){
	//获取日期
	var thisdate=getdate();
	//返回值
	var code=true;
	//抽奖记录
	var thisRuncode={date:thisdate,runcode:0}
	//判断是否有本地数据
	if(window.localStorage["runcode"]){
		//数据转换
		var Runcode=JSON.parse(window.localStorage["runcode"]);
		//判断是否当天
		if(Runcode.date==thisdate){
			if(nmb==0){
			}else if(Runcode.runcode>=nmb){
				code=false;
			}else{
				thisRuncode={date:thisdate,runcode:Runcode.runcode+1};
				addlocalStorage(thisRuncode);
			}
		}else{
			addlocalStorage(thisRuncode);
		}
	}else{
		
		addlocalStorage(thisRuncode);
	}
	return code;
}
//本地存储函数
function addlocalStorage(thisRuncode){
	window.localStorage["runcode"]=JSON.stringify(thisRuncode);
}
//获取日期函数
function getdate(){
	var thisdate=new Date();
	var thisdy=thisdate.getYear()+thisdate.getMonth()+1+thisdate.getDate();
	return thisdy;
}
//随机抽奖刷新一次页面只能抽一次1等奖,返回值为奖项序号
function prize(){
	var thisprize=Math.ceil(Math.random()*8);
	if(thisprize==1){
		if(haveprize==thisprize){
			prize();
		}else{
			haveprize=thisprize;
			return thisprize;
		}
	}else{
		return thisprize;
	}
	
}

尾声

如有问题欢迎留言，会及时回复