怎麼寫一個帶名字滾動的抽獎頁面

　　最近甲方公司年會，年會上必不可少的一個環節就是抽獎，於是需要一個帶人名滾動的抽獎頁面。

　　有兩種思路可以參考：1是可以進頁面之後抽獎之前就已經隨機分好中獎人員的名單，人名滾動純屬效果，等到按停止按鈕的時候直接顯示上已分配好的名字；2是滾動之後，直接取按停止按鈕停止的名字。考慮到這只是一個簡單的功能頁面，於是我選擇用原生來寫，一是省事，二是寫了好久的vue，原生js都快忘光了，順便練練手。

　　抽出主要的代碼如下：

　　頁面佈局html主要代碼：

<div id="result" class="result"></div>
<div class="buttom">
    <p class="char">抽獎結果：</p>
    <div class="finalresult">
        <div id='P0'></div>
    </div>
</div>

　　js方法主要代碼：

<script>
    var nameArray=[];//參與者名單
    var whoGetTheMysteryAward=[];
    var whoGetTheMysteryAwardText='';
    var timer;
    //開始滾動方法
    //這裏定時器設置了50毫秒的滾動一次，根據自己需要調整，定時器需要提前全局定義一個，方便停止滾動方法調用
    function creatNameForAward(){
        flag=1;
        timer = setInterval(function(){
            document.getElementById('result').innerText= getNameForAward();
        },50);
    }

    //停止滾動方法
    function stop(){
        if(flag > 1){
            return null;
        }
        clearInterval(timer);
        var chickenEater=document.getElementById('result').innerText;
        whoGetTheAwardText+=chickenEater+'<br/>';                 
        document.getElementById('P0').innerHTML=whoGetTheAwardText;                   
        whoGetTheAward.push(chickenEater);//中獎人員名單保存起來可做導出用
        exclude(nameArray,chickenEater);//不可重複得獎
        flag++;
        return null;
    }

    //隨機獲取一個人的名字
    function getNameForAward(){
        var num = Math.floor(Math.random()*(nameArray.length-1));
        var str=nameArray[num];
        return str;
    }

    function exclude(all, del) {
        for(let j=0;j<all.length;j++){
            if(all[j]===del){
                all.splice(j,1);
            }
        }
        return all;
   }
</script>

主要核心代碼就是這些了，至於按鈕控制，樣式，這些需求因人而異，就按下不表了。

最後給大家看下效果，錄製工具看起來有點卡頓，見諒：

圖1 人數多時漸停效果的效果

圖2 人數少時多次單抽效果