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);
    }