js实现九宫格抽奖

一、效果图二、实现思路三、核心代码

一、效果图

二、实现思路

第一步：先建立所有奖品的集合，设置随机奖品的索引第二步：设置转圈的圈数第三步：给选到的奖品变换颜色第四步：设置转圈的速度，由慢到快，再由快到慢

三、核心代码

//点击开始抽奖var item9=document.querySelector(".item-9");var item=document.querySelectorAll(".item");var isStart=true;var time=null;var speed=100;var index = 0;//随机奖项的索引var save=null;var count = 0;var num = 0;var arr = ["笔记本", '电冰箱', '谢谢惠顾', '10元代金券', '5元代金券', '2元代金券', '谢谢惠顾', '水杯(高级)'];item9.onclick=function(){if(isStart){isStart=false;index=Math.floor(Math.random()*arr.length);Rotate();}}function Rotate(){if(num>=item.length){num=0;count++;}if(save){save.classList.remove("ck");}item[num].classList.add("ck");save=item[num];//对speed速度进行设置if(count<6){speed-=2;//提速}else{//大于等于5圈,开始减速speed+=30;}//限制speed最小值if(speed<=10){speed=10;}if(count>=8&&num==index){clearTimeout(time);return;}num++;time=setTimeout(Rotate,speed);}