2023年7月14日发(作者：)

html抽奖机代码,JS实现转动随机数抽奖特效代码⼤家都玩过抽奖游戏，或者梦想抽到⼤奖吧，但是有没有想过抽奖游戏是怎么实现的呐？今天就给⼤家分享⼀款转动随机数抽奖的JS特效代码。实现代码如下body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0ul,ol,li{list-style:none;}input,button{margin:0;font-size:12px;vertical-align:middle;}body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;background:url(../images/) repeat-y;}table{border-collapse:collapse;border-spacing:0;}.box{ padding:9px 0 0 11px; width:759px; height:611px; background:#ccc; margin:20px auto; }.inbox{ width:751px; height:596px;position:relative;}#random_box li{ position:absolute; width:144px; overflow:hidden; height:144px; border:3px solid #c7c5ca;background:#fff;}#random_box li img{ width:144px; display:block; height:144px;}.ok{ display:block; width:442px; height:294px; background:#c00; color:#fff; font-size:48px; position:absolute; top:149px;left:148px; cursor:pointer; text-align:center; line-height:280px;}#random_1{ left:0; top:0;}#random_2{ left:148px;top:0;}#random_3{ left:296px;top:0;}#random_4{ left:444px;top:0;}#random_5{ left:592px;top:0; }#random_6{ left:592px;top:148px;}#random_7{ left:592px; top:298px;}#random_8{ left:592px; top:446px;}#random_9{ left:444px; top:446px;}#random_10{ left:296px; top:446px;}#random_11{ left:148px; top:446px;}#random_12{ left:0; top:446px;}#random_13{ left:0; top:298px;}#random_14{ left:0; top:148px;}#random_box _current{border:1px solid red;}11121314抽奖var index=1, //当前亮区位置prevIndex=14, //前⼀位置Speed=300, //初始速度Time, //定义对象arr_length = 14; //GetSide(5,5), //初始化数组EndIndex=1, //决定在哪⼀格变慢cycle=0, //转动圈数EndCycle=3, //计算圈数flag=false, //结束转动标志random_num=1, //中奖数quick=0; //加速function StartGame(){$("#random_box li").removeClass("random_current"); //取消选中//random_num = parseInt($("#txtnum").val());//random_num = (()*13+2); //产出随机中奖数2--12之间index=1; //再来⼀次,从1开始cycle=0;flag=false;//EndIndex=(()*12);if(random_num>5) {EndIndex = random_num - 5; //前5格开始变慢} else {EndIndex = random_num + 14 - 5; //前5格开始变慢}//EndCycle=(()*3);Time = setInterval(Star,Speed);}function Star(num){//跑马灯变速if(flag==false){//⾛五格开始加速if(quick==5){clearInterval(Time);Speed=50;Time=setInterval(Star,Speed);}//跑N圈减速if(cycle==EndCycle+1 && index-1==EndIndex){clearInterval(Time);Speed=300;flag=true; //触发结束Time=setInterval(Star,Speed);}}if(index>arr_length){index=1;cycle++;}//结束转动并选中号码if(flag==true && index==parseInt(random_num)){quick=0;clearInterval(Time);}$("#random_"+index).addClass('random_current'); //设置当前选中样式if(index>1)prevIndex=index-1;else{prevIndex=arr_length;}$("#random_"+prevIndex).removeClass('random_current'); //取消上次选择样式index++;quick++;}实现的效果图：现在抽奖游戏应⽤的⾮常⼴泛，我们每个⼈都会接触到，尤其是节假⽇的时候各⼤商场都会组织这种类型的游戏活动吸引顾客，我上⾯分享的这段代码其实还有很多可以改进，丰富的地⽅，⽐如我们可以美化它的界⾯，功能更加丰富，还有我们可以考虑转动随机数抽奖的速度，决定在哪⼀格变慢等。以上就是本⽂的全部内容，希望⼤家可以喜欢，可以动⼿实践⼀下。