12宫格抽奖（jq+js）概率可控
前言：最近写了一个12宫格抽奖的Demo，现在来总结一下遇到的问题及开发经验。
后端：生成中奖奖品，概率控住,(主要提供一下自己的思路，主要是看后面的前端部分)
生成奖品：根据随机数生成;这里用的是**0-100**之间的随机数。
//考虑到存在小数，用的double类型
double winningIndex = new BigDecimal(new Random().nextDouble() * 100).setScale(1, BigDecimal.ROUND_HALF_UP).doubleValue();
概率控制：
1、可根据奖品的数量按照百分比来分（我这里是12个奖品，按100来算），可将概率写在数据库表中，便于修改。
/**
* 计算概率
* @param n 第几个奖品
* @param twAwards 奖品对象
* @return
*/
public double sum(int n,List<TwAward> twAwards){
double count = 0;
if(n <= twAwards.size()){
for (int i = 0; i < n; i++) {
count += Double.parseDouble(twAwards.get(i).getProbability());
}
}
return count;
}
2、根据取的随机数区间算出奖品下标传给前台控制奖品
if (winningIndex > 0 && winningIndex < sum(1,twAwards)) {//顺丰消费券
index = 0;
} else if (winningIndex > sum(1,twAwards) && winningIndex <= sum(2,twAwards)) {
index = 1;
}
.
.
.
前端：（主要实现抽奖动画）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>夺宝大转盘</title>
<meta name="keywords" content="夺宝大转盘" />
<meta name="description" content="夺宝大转盘" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no,email=no,adress=no" />
<link rel="stylesheet" href="css/swiper.min.css">
<link href="css/systyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div class="banner"><img src="images/banner.jpg" /></div>
<div class="bjxs clearfix">
<div class="jihisx">您本月还有<span>3</span>次抽奖机会</div>
<div class="box">
<div class="draw" id="lottery">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="item lottery-unit lottery-unit-0">
<div class="img">
<img src="images/jiang01.png" alt="">
</div>
</td>
<td class="item lottery-unit lottery-unit-1">
<div class="img">
<img src="images/jiang02.png" alt="">
</div>
</td>
<td class="item lottery-unit lottery-unit-2">
<div class="img">
<img src="images/jiang03.png" alt="">
</div>
</td>
<td class="item lottery-unit lottery-unit-3">
<div class="img">
<img src="images/jiang04.png" alt="">
</div>
</td>
</tr>
<tr>
<td class="item lottery-unit lottery-unit-11">
<div class="img">
<img src="images/jiang05.png" alt="">
</div>
</td>
<td colspan="2" rowspan="2" class="dingsx" >
<div class="choujiangbj">
<img src="images/choubj.png" />
</div>
<a class="draw-btn cur juzhong" href="javascript:"><img src="images/chou.png" alt=""></a>
</td>
<td class="item lottery-unit lottery-unit-4">
<div class="img">
<img src="images/jiang06.png" alt="">
</div>
</td>
</tr>
<tr>
<td class="item lottery-unit lottery-unit-10">
<div class="img">
<img src="images/jiang07.png" alt="">
</div>
</td>
<td class="item lottery-unit lottery-unit-5">
<div class="img">
<img src="images/jiang08.png" alt="">
</div>
</td>
</tr>
<tr>
<td class="item lottery-unit lottery-unit-9">
<div class="img">
<img src="images/jiang09.png" alt="">
</div>
</td>
<td class="item lottery-unit lottery-unit-8">
<div class="img">
<img src="images/jiang10.png" alt="">
</div>
</td>
<td class="item lottery-unit lottery-unit-7">
<div class="img">
<img src="images/jiang11.png" alt="">
</div>
</td>
<td class="item lottery-unit lottery-unit-6">
<div class="img">
<img src="images/jiang12.png" alt="">
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tanchuangbj">
<div class="tanchuang">
<div class="jiangpingbox">
<img src="images/dongtu.gif" />
<P id="awardName">爱奇艺黄金月卡</P>
</div>
<a href="javascript:;" class="close"><img src="images/xxx.png" /></a>
</div>
</div>
</body>
<script>
js部分
这里是在前端随机取的中奖下标位置，开发中可以直接在页面加载的时候获取后端传来的index来确定获取的奖品。
//奖品名称 生产中，可从后台传值获取
var awardName = ['顺丰寄件优惠券','华为P40手机','爱奇艺黄金VIP会员-月卡','随机现金红包','拼多多40元现金红包','伊藤良品抗菌口罩优惠券 ','喜马拉雅VIP会员-周卡',
'2G流量日包','美团外卖红包','3元话费抵扣券','罗马仕移动电源','30分钟语音日包'];
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.lottery-unit-' + this.index).addClass('active');
};
},
roll: function() {
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active');
index += 1;
if (index > count - 1) {
index = 0;
};
$(lottery).find('.lottery-unit.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(); //转动过程调用的是lottery的roll方法，这里是第一次调用初始化
if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
clearTimeout(lottery.timer);
//给中奖弹窗添加奖品名称
$("#awardName").text(awardName[lottery.prize]);
//显示获奖产品
setTimeout(function(){
$(".tanchuangbj").show();
},1000);
lottery.prize = -1;
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;
} 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(roll, lottery.speed); //循环调用
}
return false;
}
var click = false;
window.onload = function(){
lottery.init('lottery');
$('.draw-btn').click(function() {
$(this).removeClass("cur")
if (click) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
return false;
} else {
lottery.speed = 100;
roll(); //转圈过程不响应click事件，会将click置为false
click = true; //一次抽奖完成后，设置click为true，可继续抽奖
return false;
}
});
};
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
