仿微站大转盘模块功能

近日由于工作的需要，开发了大转盘抽奖的模块！起初自己也显得比较没有头绪，于是上网找了些资料，但是发现都没有很好的解决自己的问题，于是乎只能参考网上的一些资料，自己去做了！这里跟大家分享下大转盘的功能滴开发~
一些东东完全是按照自己的理解和设计去走的，能力有限，请见谅

1.首先得确定你的奖项有多少个，你也可以开发设置成手动在后台配置的。当然我就是这么做的~
2.其实确定中奖概率，说实话自己到目前为止也没有想到一个能够很好的确定各个奖项的中奖概率的问题，如果有朋友有好的想法和算法，可以一起探讨下！

确定好以上步骤之后，就可以慢慢的开始开发了：

1）使用jquery.easing的js库的动画效果；再使用jqueryrotate插件库进行旋转抽奖处理

引入脚本库：

<script type="text/javascript" src="<%=path %>/files/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/files/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="<%=path %>/files/jquery.easing.min.js"></script>
<script type="text/javascript" src="<%=path %>/js_customer/award.js"></script>

页面代码：

<div id="outercont" >
	<div id="outer-cont" style="overflow:hidden;">
		<div id="outer"><img src="<%=path %>/files/activity-lottery-1.png" width="310px"></div>
	</div>
	<div id="inner-cont">
		<div id="inner"><img src="<%=path %>/files/activity-lottery-2.png"></div>
	</div>
	</div>

Award.JS代码：

$(function(){ 
     $("#inner").click(function(){ 
        lottery(); 
    }); 
}); 
function lottery(){ 
	var weChatName = $("#weChatName").val();
    $.ajax({ 
        type: 'POST', 
        url: '/for_free/awardcomprehensive', 
        data:"weChatName="+weChatName+ "&r="
		+ Math.random(),
        error: function(){ 
            alert('出错了！'); 
            return false; 
        }, 
        
        success:function(json){ 
        	var data = eval('(' + json + ')'); 
            $("#inner").unbind('click').css("cursor","default"); 
            //var a = parseInt(json.angle); //角度 
            var a = parseInt(data.angle); //角度
            var p = data.prize; //奖项 
            var msg = data.msg; //提示信息
            $("#outer").rotate({ //inner内部指针转动，outer，外部转盘转动
                duration:5000, //转动时间 
                angle: 0, //开始角度 
                animateTo:3600+a, //转动角度 
                easing: $.easing.easeOutSine, //动画扩展 
                callback: function(){ 
            	   alert(msg);
                } 
            }); 
            
        } 
    }); 
}

注意rotate方法中的几个参数，angle是开始的角度，而animateto表示旋转的角度，后面的a就是从后台传入的角度。Easing则用到了引入的另外一个js库中的效果

2）奖项的设置




这里把所有的信息都设置为奖项，这样可以更加方便进行计算
Id就是指奖项的ID
Startangle就是开始的角度，
Endangle就是指结束的角度。
Awardchance是指奖项的总数

此处的开始角度和结束角度需要按照奖项和转盘的实际角度数字来进行分割。自己在这里做的不是很好，还要进行微调~

3）把这些奖项都获取出来放到一个map中，key值为id，value值为奖项这个domain类

AwardPrizeBiz biz = new AwardPrizeBizImpl();
		Map<Integer, AwardPrize> award_maps = biz.getAllAwawrdPrize2Map();
		WinedPrizeBiz biz2 = new WinedPrizeBizImpl();
		AwardPrize result = null;
		WinedPrize prize = null;
		try {
			while (true) {
				int randomNum = new Random().nextInt(award_maps.size());
				if (award_maps.containsKey(randomNum)) {//中奖
					result = award_maps.get(randomNum);//所中的奖项
					Integer wined_count = biz2.getAllWinedPrize(randomNum)
							.size();//已经被抽中的奖品
					int tem_count = award_maps.get(randomNum).getAwardChance()
							- wined_count - 1;//判断奖品数量是否足够
					if (tem_count < 0) {
						continue;
					} else {
						prize = new WinedPrize();
						prize.setAwardId(String.valueOf(result.getAwardId()));
						prize.setAwardMsg(result.getAwardMsg());
						prize.setCustTel(telephone);
						prize.setOrder_verify(verify);
						prize.setWpDate(SimpleDateUtil.getFormatDateTime(new Date()));
						prize.setWpSate("0");
						prize.setWpUUID(CheckcodeUtil.getVerify_code());
						biz2.winAwardPrize(prize);
						break;
					}
				} else {
					continue;
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return result;

抽奖过程中产生一个map集合长度之内的随机数，然后比较ID，如果符合则判断为中奖，另外，比较已经中奖的数量，判断是否还有足够的剩余数量，如果没有则继续产生随机数，如果有，则中奖；返回中奖信息

4）构造反馈给页面的中奖信息

response.setContentType("text/html;charset=GBK");
		PrintWriter out = response.getWriter();
		StringBuffer bf = new StringBuffer();

		HttpSession session = request.getSession(true);

		String telephone = (String) session.getAttribute("telephone");
		String verify = (String) session.getAttribute("verify");

		AwardWebBiz biz = new AwardWebBiz();
		ApplyOrder order = biz.validateInvitation(telephone, verify);
		if (order != null) {
			boolean flag = biz.chargeInvitation(telephone, verify);
			if (flag) {
				try {
					if (verify != null && !"".equals(verify)) {
						Object obj[] = biz.returnWined2Customer(verify,
								telephone);// 抽奖后返回角度和奖品等级
						bf.append("{success:true");
						bf.append(",");
						bf.append("angle:" + obj[0]);
						bf.append(",");
						bf.append("prize:" + obj[1]);
						bf.append(",");
						bf.append("msg:'" + obj[2] + "'}");
						// 判断是否属于中奖可兑奖范围
						if (obj[2].equals("一等奖") || obj[2].equals("二等奖")
								|| obj[2].equals("三等奖")) {
							SendMessageUtil.sendMsg(telephone, MessageUtil
									.sendWinAwardMsg2Customer(biz
											.getWinedPrize(verify, telephone)));
						}
					} else {
						bf.append("{success:false");
						bf.append(",");
						bf.append("msg:'请填写验证码'}");
					}
					SendMessageUtil.sendMsg(order.getCustomerTel(), MessageUtil
							.sendExpire2Customer(order));
				} catch (Exception e) {
					e.printStackTrace();
				}
			} else {
				bf.append("{success:false");
				bf.append(",");
				bf.append("msg:'出问题了，请联系系统管理员!'}");
			}
		}else{
			bf.append("{success:false");
			bf.append(",");
			bf.append("msg:'验证失效!'}");
		}

		out.print(bf.toString());
		out.flush();
		out.close();

其中json中的angle就是页面需要的旋转角度参数。这样就可以看到转盘旋转的效果了，然后页面提示的中奖信息也是后台传入的中奖信息！




自己在设计的过程中，角度把握还得微调，还有就是中奖概率的问题，希望有高手可以指点下~谢谢！

评论

2 楼 ducklsl 2014-11-04  

kentkwan 写道

这种有限奖励个数的伪随机用毛随机生成  根据奖励数量和类型 算出所有奖励的出现次数 然后用AtomicLong做计数器 匹配则中奖 奖励计算压力只存在于起服阶段

  谢谢了，我之前也想过了就是按奖励的类型和数量算出出现次数，然后后面就不知道该怎么解决了，所以就用了随机数！不过谢谢你的提示哈~我自己再做做调整~

1 楼 kentkwan 2014-11-03  

这种有限奖励个数的伪随机用毛随机生成  根据奖励数量和类型 算出所有奖励的出现次数 然后用AtomicLong做计数器 匹配则中奖 奖励计算压力只存在于起服阶段