抽奖抽奖抽奖

  现在很多运营活动喜欢抽奖,遇到一种就来记录一种,生产环境下概率最好还是从后台给,这里代码都写在客户端是用作思考学习。

一、圆形转盘

布局:背景图、按钮、指针(也有用 canvas 自己画的,但是感觉工作上并不实用)
逻辑:随机一个结果,得到其位置的度数,利用 rotate 控制背景图片旋转到该度数,duration 控制旋转时间,setTimeout 来控制公告弹出的时间
概率:权重,使用 Math.floor(Math.random()*sum + 1) 取得随机整数
重要变量:

  • angles 旋转角度,度数控制停留的位置
  • rotNum 旋转基数,转盘旋转一圈后并不是回到原点,下次改变角度的时候要算上之前旋转过的度数,旋转基数在转盘转过一圈的时候+1

参考代码段:

1
2
3
4
5
6
<!--HTMl-->
<div class="bkgd" >
<img class="imgs" id="imgs" src="images/disc-rotate.jpg" />
<div class="arrow"></div>
<button class="lot-btn" id="lot-btn" type="button"></button>
</div>

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
//javascript
$("#lot-btn").click(function(){
if (clickNum >= 1){
clickNum = clickNum-1; //可抽奖次数减一
rotNum ++; //旋转基数加一
runCup(); //转盘旋转
$('#lot-btn').attr("disabled", true);
setTimeout(function(){
result_confirm(clickNum)
//window.confirm(notice + "\n\n若不满意该结果,您有一次重新抽奖的机会,是否重抽?" );
alert(notice);
$("#lot-btn").attr("disabled", false);
},1800);
}
else{
alert("亲,抽奖次数已用光!");
}
})

//转盘旋转,将各个变量结果赋值
function runCup(){
resultinfo = getResult();
notice = '恭喜获得:' + resultinfo;
angles = rotNum*1080 + getAngles(resultinfo);

$("#imgs").rotate({
animateTo: angles,
duration: 1800
});
}

//随机一个结果用以展示
function getResult(){
var sum = 0;
var rand = 0; //随机数
var result = 0;

//取得权重总数
for (var i = 0; i < data.length; i++) {
sum += data[i].probability
}
console.log( sum );

//从总数里面随机一个数,并对应输入随机的值
for (var i = 0; i < data.length; i++) {
rand = Math.floor(Math.random()*sum + 1);
if (data[i].probability >= rand) {
result = data[i].info;
break;
} else {
sum -= data[i].probability;
}
}
console.log( result );
return result;
}

//获得旋转结果对应的旋转度数
function getAngles(resultinfo){
var num
//查找结果的位置
for (var i = 0; i < data.length; i++) {
if( resultinfo == data[i].info ){
num = i;
break
}else{
console.log( "不相等,继续循环" );
}
}
console.log( num );
if( num == 0 ){angles = 1825;
}else if( num == 1 ){angles = 1775;
}else if( num == 2 ){angles = 1725;
}else if( num == 3 ){angles = 1675;
}else if( num == 4 ){angles = 1625;
}else if( num == 5 ){angles = 1925;
}else if( num == 6 ){angles = 1875;
}else{console.log( "error" );
}
return angles;
}

二、九宫格转盘

布局:背景图、抽奖的元素、使用表格把各元素排好
旋转方法:使用 setTimeout 重复执行改变单元格 css 的代码,模拟旋转,停止旋转时用 clearTimeout 清除设置
停止旋转:clearTimeout(id_of_settimeout)
概率:同上,权重
重要变量:

  • index:-1 当前位置,控制 css 变化,转动一次自增 1
  • count:0 总共有多少个位置,控制 index 置 0 的时机
  • speed 转动速度,数字越小,转动越快,setTimeout 的参数
  • times:0 转动次数,可根据这个值的区间来设置 speed,让速度有变化
  • cycle:30 转动基本次数:转动一圈需要至少需要的转动次数
  • prize:-1 中奖位置,当 index=prize 且旋转次数满足的时候,停止转动

参考代码段:

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
//javascript
var lottery={
index:-1, //当前转动到哪个位置,起点位置
count:0, //总共有多少个位置
timer:0, //setTimeout的ID,用clearTimeout清除
speed:20, //初始转动速度,数字越小,转动越快
times:0, //转动次数
cycle:30, //转动基本次数:转动一圈需要至少需要的转动次数
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");
};
},

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;
},
};

function roller(){
lottery.times += 1;
lottery.roll();
//var index = Math.random()*(lottery.count)|0;随机结果,这里要修改,采用圆形转盘的方式
lottery.prize = index;
if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) { //转动次数大于基本次数的时候,停止转动
clearTimeout(lottery.timer); //清除延迟执行,停止转动
console.log("结果:"+lottery.prize+",转动次数:"+lottery.times+",转动速度:"+lottery.speed);
lottery.times=0; //重置次数
click=false; //点击状态改变
}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;
lottery.speed +=10;
}else{
if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
lottery.speed += 110;
}else{
lottery.speed += 20;
}
}
if (lottery.speed<40) {
lottery.speed=40;
};
lottery.timer = setTimeout(roller,lottery.speed);
}
return false;
}


-------------End of this article, thanks for your reading. -------------
奖励我一个棒棒糖吗?