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