JavaScript 練手小案例：九宮格抽獎

看到個抽獎案例，覺得還不錯。就自己做了一個簡單版本。。

點擊中間的開始，抽獎就會跑起來，速度由慢到快，再到慢，最後停下。停下的格子就是中獎的獎品。

 主要思路：

1、抽獎的高亮色塊輪循，使用一個 class 去控制。

2、要控制色塊輪循的速度快慢，要用到計時器 setTimeout，可以控制輪循速度。

3、正在抽獎輪循的時候，開始按鈕是不能點擊的。所以要用一個變量判斷當前是否正在輪循。

4、輪循的次數是一個隨機數，這樣每次開始輪循的結果都是隨機的。

HTML

<div class="box" id="box">
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li id="start">開始</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>

開始菜單在中間，因此輪循環的獎品 li ，其實是 0 -3 ，5-8 這幾個 li。

CSS

.box{
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
.box li{
    width: 98px;
    height: 98px;
    float: left;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    margin-top: 1px;
    background: #b2967d;
}
.box .show{
    background: #ffb8af;
}

色塊高亮，用的是一個類去控制。所以，要在樣式裏把類 show 寫好。

JavaScript代碼

let box = document.getElementById("box");
let start = document.getElementById("start");
let li = box.querySelectorAll("li");
let indexArr = [0,1,2,5,8,7,6,3];

因爲這裏 li 是直接浮動的，而輪循的標籤是圍繞 start 一圈的，順序不是 0-8依次增長的。所以，用了一個數組 indexArr 來控制輪循的標籤的索引順序。

方塊的高亮添加和去掉，利用了兩個工具函數：

 // 查找兄弟標籤
    let findeSibling = (tag)=>{
        let arr = [];
        for(let i=0; i<= li.length-1 ; i++){
           if( li[i] === tag ){
               continue ;
           }
           arr.push( li[i]  );
        }
        return arr ;
    };
    // 當前標籤添加類名 cName，兄弟標籤去掉類名 cName。
    let tagAddClass = function( tag,cName ){
          let siblings = findeSibling(tag);
          for(let i=0 ; i<= siblings.length-1 ; i++ ){
                siblings[i].classList.remove(cName );
          }
          tag.classList.add( cName );
    };

一些變量設定：

let speed = 250 ;
let myset = null;
let index = 0 ;
let times = 0 ; // 輪循的次數
let isGoing = 0 ; // 判斷是否正在輪循，默認 否。
let startEndTimes = 10 ; // 開頭和結束的緩衝次數
let startTimes =times-startEndTimes ;     // 開頭, 輪循環次數
let endTimes = startEndTimes ;   // 結束, 輪循環次數

speed 輪循的速度。

index 表示當前索引，默認爲 0 。從索引爲 0 的標籤開始。

times 用來表示每次輪循的次數，默認爲 0。這個數據，在點擊start 後，會生成一個隨機數來替代它的值。

isGoing 是否在輪循。是的話，爲 1；否，爲 0（默認）。用來判斷是否輪循，防止多次點擊 start。如果在輪循，是不允許點擊 start 的。

startTimes，endTimes  ，因爲輪循的開始和結尾的時候，速度會發生變化，所以要判斷，是否進入到開始和結束的狀態。

startEndTimes，設定開始和結束的緩衝次數都是 10 次。

點擊按鈕，開始輪循~

 tagAddClass( li[index], "show");  // 默認顯示 0 

let startFun = function(event){
        if( isGoing ){ // 判斷是否正在輪循, 是，就終止函數。
            return  ;  // 防止重複點擊
        }
        isGoing = 1 ;
        times = Math.floor(Math.random()*20)+30;
        startTimes = startEndTimes;     // 開頭, 輪循環次數
        endTimes = times-startEndTimes ;   // 結束, 輪循環次數
        myset = setTimeout(goFun,speed);
 };

start.addEventListener("click",startFun);

關鍵的 goFun 函數：

 let goFun = function(){
        index++;
        if( index > indexArr.length-1 ){
            index = 0;
        }
        tagAddClass( li[ indexArr[index] ], "show");
        times -- ;
        if( times>=startTimes ){  // 開始階段，speed 加速，減少值
            speed -= 20 ;
        }
        if( times <= endTimes ){  // 結束階段，speed 減速，增加值
            speed += 20
        }
        if( times<=0 ){  // 次數完畢，結束輪循
            isGoing = 0 ;
            clearTimeout(myset);  // 停止計時器，釋放資源
           console.info( indexArr[index] );  // 彈出當前的標籤，這個就是中獎的內容~！
            return false;  // 終止函數運行，結束循環。
        }
        myset = setTimeout(goFun,speed);
};

完整 JS 代碼：

{
    let box = document.getElementById("box"); 
    let start = document.getElementById("start");
    let li = box.querySelectorAll("li");
    let indexArr = [0,1,2,5,8,7,6,3];
    // 查找兄弟標籤
    let findeSibling = (tag)=>{
        let arr = [];
        for(let i=0; i<= li.length-1 ; i++){
           if( li[i] === tag ){
               continue ;
           }
           arr.push( li[i]  );
        }
        return arr ;
    };
    // 當前標籤添加類名 cName，兄弟標籤去掉類名 cName。
    let tagAddClass = function( tag,cName ){
          let siblings = findeSibling(tag);
          for(let i=0 ; i<= siblings.length-1 ; i++ ){
                siblings[i].classList.remove(cName );
          }
          tag.classList.add( cName );
    };
    let speed = 250 ;
    let myset = null;
    let index = 0 ;
    let times = 0 ; // 輪循的次數
    let isGoing = 0 ; // 判斷是否正在輪循，默認 否。
    let startEndTimes = 10 ; // 開頭和結束的緩衝次數
    let startTimes =times-startEndTimes ;     // 開頭, 輪循環次數
    let endTimes = startEndTimes ;   // 結束, 輪循環次數
    let goFun = function(){
        index++;
        if( index > indexArr.length-1 ){
            index = 0;
        }
        tagAddClass( li[ indexArr[index] ], "show");
        times -- ;
        if( times>=startTimes ){  // 開始階段，speed 加速，減少值
            speed -= 20 ;
        }
        if( times <= endTimes ){  // 結束階段，speed 減速，增加值
            speed += 20
        }
        if( times<=0 ){  // 次數完畢，結束輪循
            isGoing = 0 ;
            clearTimeout(myset);  // 停止計時器，釋放資源
           console.info( indexArr[index] );  // 彈出當前的標籤，這個就是中獎的內容~！
            return false;  // 終止函數運行，結束循環。
        }
        myset = setTimeout(goFun,speed);
    };
    tagAddClass( li[index], "show");  // 默認顯示 0
    let startFun = function(event){
        if( isGoing ){ // 判斷是否正在輪循, 是，就終止函數。
            return  ;  // 防止重複點擊
        }
        isGoing = 1 ;
        times = Math.floor(Math.random()*20)+30;
        startTimes =times-startEndTimes ;     // 開頭, 輪循環次數
        endTimes = startEndTimes ;   // 結束, 輪循環次數
        console.info( times, startTimes, endTimes);
        myset = setTimeout(goFun,speed);
    };

    start.addEventListener("click",startFun);
}

樣式寫的很簡單，基本原理就是這樣~！

大家可以自行擴展~