抽奖 开源 html5,抽奖转盘.html · smilestone/awardRotate - Gitee.com

jQuery 抽奖转盘

#box{width: 340px;height: 340px;

position: absolute;

left:50%;top:50%;margin-left:-170px;margin-top:-170px;

background-image: url("bg-lottery.png");

}

#pointer{width: 186px;height: 186px;

margin-left:77px;margin-top:77px;

background-image: url("playbtn.png");

cursor: pointer;

}

#records{

position: absolute;

left: 100%;margin-left: -400px;

top:50%;margin-top: -340px;

display: block;line-height: 15px;

width: 400px;background: cornsilk;color: crimson;

height:auto;font-size: 12px;

border:dotted black 1px;}

$(function(){

var backDoor=true;

var overTime=[0,1];//随机网络超时处理 0 超时， 1正常抽奖

var rotateObj=[

{myangle:0,msg:'恭喜，获得理财金2000元',rangeL:70,rangeR:89},

{myangle:60,msg:'谢谢参与，再接再厉吧！',rangeL:'',rangeR:''},

{myangle:120,msg:'恭喜，获得理财金5200元！',rangeL:90,rangeR:99},

{myangle:180,msg:'恭喜，获得京东e卡！',rangeL:0,rangeR:39},

{myangle:240,msg:'谢谢参与，再接再厉吧！',rangeL:'',rangeR:''},

{myangle:300,msg:'恭喜，获得理财金1000元',rangeL:40,rangeR:69},

{myangle:1440,msg:'sorry,由于系统访问量过大，网络超时！'}

];

var overTimeAngle=[1,3,5,7,9,11];//产生随机的边界角度的倍数

var randOverNum;

var randNum;

//空格键 控制是否有中奖概率

$(document).keydown(function(event){

var kcode=event.keyCode;

if(kcode==32){

if(backDoor==true){

backDoor=false;//永远不会中奖

}

else{

backDoor=true;//正常概率抽奖

}

}

});

//开始抽奖

$("#pointer").click(function(){

randOverNum=overTime[Math.floor(Math.random(0,1)*overTime.length)];//生成是否进入网络超时情况

if(backDoor==true){//如果允许有中奖概率

console.log("不中奖后门关闭!");

if(randOverNum==0){//进入网络故障

randNum=6;

console.log("有网络问题code:"+randOverNum+"中奖随机数指定为:"+randNum);

var baseAngle= overTimeAngle[Math.floor(Math.random(0,5)*overTimeAngle.length)]*30;//产生随机的边界角度作为参数：基础角度 的值

myRotate("#pointer",rotateObj,5000,baseAngle,randNum);//网络超时情况必须填写baseAngle参数

}

else{//正常抽奖

len=rotateObj.length;

randNum = Math.floor(Math.random(0,len-1)*(len-1));

console.log("无网络问题code:"+randOverNum+"正常抽奖,随机数是:"+randNum);

randCtrl(randNum);//如果抽中某一项奖,则进行二次运作，不同奖项号码，将被制定不同的概率再次抽奖，在概率范围内的视为最终中奖！

}

}

else {

console.log("开启了不中奖后门!");

myRotate("#pointer",rotateObj,4000,1440,noAward());//noAward()是不中奖的号码中的一个

}

});

//转动函数 共5个参数分别是指针的id("#idname")或class(".className"),抽奖提示语,旋转时间，基础旋转角度,随机奖品序号0-6

function myRotate(pointer,rotateData,duration,baseAngle,randNum){

var ang=rotateData[randNum].myangle;//获取奖品的旋转位置

$(pointer).rotate({

angle:0,

duration: duration,

animateTo:ang+(baseAngle||1080),

callback:function(){

alert(rotateData[randNum].msg);

$("#records").html($("#records").html()+rotateData[randNum].msg+"  "+getSysDate()+"
");

console.log($(this).getRotateAngle());

$(pointer).rotate({

angle:0

});

}

});

}

//大盘转动

function bigPanRotate(addAngle){

console.log("偏移角度："+addAngle);

$("#box").rotate({

angle:0,

duration: 3000,

animateTo:-(1440+addAngle),

callback:function(){

$(this).rotate({

angle:0

});

}

});

}

//中奖概率控制

function randCtrl(randNum){

var awardNum=[0,2,3,5];

var rangL,rangR;//定义各中奖号码的范围(概率)

var randRange;

var checkIn = $.inArray(randNum,awardNum);//如果存在，则返回该值在数组中的index,不存在返回-1

if(checkIn>=0){//随机抽奖号码在中奖号码之中,进行后台二次抽奖运作

randRange=Math.floor(Math.random(0,99)*100);//产生新的随机中奖号码 0-99的整数

rangL=rotateObj[randNum].rangeL;//当前中奖号码的左范围

rangR=rotateObj[randNum].rangeR;//当前中奖号码的右范围

console.log("抽中中奖号码："+randNum+",新中奖号码是:"+randRange+",中奖范围是：("+rangL+","+rangR+"),中奖率:"+(rangR-rangL+1)+"%");

if(randRange>=rangL&&randRange<=rangR){//如果新的随机数 randRange在这个范围内 则该号码中奖

console.log("新中奖号码:"+randRange+",在中奖控制范围内，恭喜中奖！");

myRotate("#pointer",rotateObj,3000,1080,randNum);

}

else {//否则，无论randnum是哪个中奖号码 如果新的randrange不在相应号码的范围内就不算中奖

console.log("新中奖号码:"+randRange+",不在中奖控制范围内，再接再厉！");

myRotate("#pointer",rotateObj,4000,1440,noAward());//最后一个参数是randNum=noAward()的返回值

}

}

else {//随机号码不在中奖号码之中，执行不中奖函数

console.log("没有抽中任意中奖号码，将执行任意不中奖处理"+randNum);

myRotate("#pointer",rotateObj,4000,1440,noAward());//最后一个参数是randNum=noAward()的返回值

}

}

//返回不中奖选项

function noAward(){

var noAwardArr=[1,4];//只允许抽中1,4项 无奖项

len=noAwardArr.length;

randNum = noAwardArr[Math.floor(Math.random(0,len-1)*len)];//只能取到1,4两个没有奖项的可能

console.log("执行了不中奖函数，不中奖的随机数是:"+randNum);

return randNum;//函数返回值 是 不中奖的号码

}

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史