在线抽奖大转盘和概率计算

2025-01-09 技术教程

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><title>抽奖效果演示</title><style>.rotary{position:relative;width:854px;height:504px;margin:0auto;background:#d71f2eurl(p_w_picpaths/bg1.png);}.rotaryArrow{position:absolute;left:181px;top:104px;width:294px;height:294px;cursor:pointer;background-p_w_picpath:url(p_w_picpaths/arrow.png);}.list{position:absolute;right:48px;top:144px;width:120px;height:320px;overflow:hidden;}.listh4{display:none;}.listul{list-style-type:none;}.listli{height:37px;font:14px/37px"MicrosoftYahei";color:#ffea76;text-indent:25px;background:url(p_w_picpaths/user.png)0no-repeat;}.result{display:none;position:absolute;left:130px;top:190px;width:395px;height:118px;background-color:rgba(0,0,0,0.75);filter:alpha(opacity=90);}.resulta{position:absolute;right:5px;top:5px;width:25px;height:25px;text-indent:-100px;background-p_w_picpath:url(p_w_picpaths/close.png);overflow:hidden;}.resultp{padding:45px15px0;font:16px"MicrosoftYahei";color:#fff;text-align:center;}.resultem{color:#ffea76;font-style:normal;}</style></head><body><h2>抽奖效果演示</h2><divclass="rotary"><divclass="rotaryArrow"id="rotaryArrow"></div><divclass="result"id="result"><pid="resultTxt"></p><ahref="javascript:"id="resultBtn"title="关闭">关闭</a></div></div><scriptsrc="js/jquery-1.8.3.min.js"></script><scriptsrc="js/jquery.rotate.min.js"></script><script>$(function(){var$rotaryArrow=$('#rotaryArrow');var$result=$('#result');var$resultTxt=$('#resultTxt');var$resultBtn=$('#result');$rotaryArrow.click(function(){varlottery_flag=0;/***数组lottery为中奖概率数组**中奖概率:*0-不中奖:20%*1-1元代金券:35%*2-5元代金券:20%*3-10元代金券:12%*4-20元代金券:8%*5-50元代金券:1%*6-30元代金券:4%*/varlottery=[5,3,5,8,12,100,25];vardata=[0,1,2,3,4,5,6];for(i=0;i<data.length;i++){if(Math.floor(Math.random()*lottery[i])==1){lottery_flag=data[i];break;}}varflag=177;//设置未中奖的默认角度vardate=newDate();varseconds=date.getSeconds();if(seconds%2==0){//根据时间秒数是否被2整除,模拟未中奖时指针对两个未中奖角度的随机flag=0;}switch(lottery_flag){case1:rotateFunc(1,87,'恭喜您获得了<em>1</em>元代金券');break;case2:rotateFunc(2,43,'恭喜您获得了<em>5</em>元代金券');break;case3:rotateFunc(3,134,'恭喜您获得了<em>10</em>元代金券');break;case4:rotateFunc(5,223,'恭喜您获得了<em>20</em>元代金券');break;case5:rotateFunc(6,268,'恭喜您获得了<em>50</em>元代金券');break;case6:rotateFunc(7,316,'恭喜您获得了<em>30</em>元代金券');break;default:rotateFunc(0,flag,'很遗憾，这次您未抽中奖，继续加油吧');}});varrotateFunc=function(awards,angle,text){//awards:奖项，angle:奖项对应的角度$rotaryArrow.stopRotate();$rotaryArrow.rotate({angle:0,duration:5000,animateTo:angle+1440,//angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈callback:function(){$resultTxt.html(text);$result.show();}});};$resultBtn.click(function(){$result.hide();});});</script><style>*{margin:0;padding:0;}body{font-family:Consolas,arial,"宋体";}h2{width:900px;margin:40pxauto;font:32px"MicrosoftYahei";text-align:center;}.explain,.dowebok-explain{margin-top:20px;font-size:14px;text-align:center;color:#f50;}.vad{margin:50px05px;font-family:Consolas,arial,宋体;text-align:center;}.vada{display:inline-block;height:36px;line-height:36px;margin:05px;padding:050px;font-size:14px;text-align:center;color:#eee;text-decoration:none;background-color:#222;}.vada:hover{color:#fff;background-color:#000;}.thead{width:728px;height:90px;margin:0auto;border-bottom:40pxsolid#fff;}.code{position:relative;margin-top:100px;padding-top:41px;}.codeh4{position:absolute;top:0;z-index:10;width:100px;height:40px;font:16px/40px"MicrosoftYahei";text-align:center;cursor:pointer;}.code.cur{border:1pxsolid#f0f0f0;border-bottom:1pxsolid#f8f8f8;background-color:#f8f8f8;}.code.h41{left:0;}.code.h42{left:102px;}.code.h43{left:204px;}.code.h44{left:306px;}.code{width:900px;margin-left:auto;margin-right:auto;}pre{padding:15px0;border:1pxsolid#f0f0f0;background-color:#f8f8f8;}.f-dn{display:none;}</style></body></html>

附件：http://down.51cto.com/data/2368005