怎么写一个带名字滚动的抽奖页面

　　最近甲方公司年会，年会上必不可少的一个环节就是抽奖，于是需要一个带人名滚动的抽奖页面。

　　有两种思路可以参考：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 人数少时多次单抽效果