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

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

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

原文地址:https://www.cnblogs.com/jdWu-d/p/14277377.html