本文共 392 字，大约阅读时间需要 1 分钟。

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

　　有两种思路可以参考：1是可以进页面之后抽奖之前就已经随机分好中奖人员的名单，人名滚动纯属效果，等到按停止按钮的时候直接显示上已分配好的名字；2是滚动之后，直接取按停止按钮停止的名字。考虑到这只是一个简单的功能页面，于是我选择用原生来写，一是省事，二是写了好久的vue，原生js都快忘光了，顺便练练手。

　　抽出主要的代码如下：

　　页面布局html主要代码：

    
    
    
     
抽奖结果：
    
     
        
      
    
     
    

　　js方法主要代码：

主要核心代码就是这些了，至于按钮控制，样式，这些需求因人而异，就按下不表了。

最后给大家看下效果，录制工具看起来有点卡顿，见谅：

图1 人数多时渐停效果的效果

图2 人数少时多次单抽效果

转载地址：http://uduyz.baihongyu.com/