vue滚动抽奖

怼烎@ 2022-10-27 13:55 405阅读 0赞

视频还在审核中。。。  
**HTML**

<template>
    <div id="app">
        <div id="container" class="container">
            <transition name="bounce">
                <template>
                    <div v-show="luckyDrawShow" id="luckyDraw" class="luckyDraw">
                        <p class="title">一等奖<a @click="luckyDrawShow=false">关闭</a></p>
                        <div id="draw" class="draw">
                        <transition name="out-in">
                            <div :key="winner" v-cloak="">{ { winner}}</div>
                        </transition>
                        </div>
                        <div class="btn-box">
                            
                            <a @click="start">开始</a>
                            <a @click="end">停止</a>
                        </div>
                    </div>
                </template>
            </transition>
        </div>
        <div id="j_list" style="display:none">
            <p v-for="item in peopleList">
                <span class="name">{ { item.teamCode}}</span>
                <span class="tell">{ { item.siteName}}</span>
            </p>
        </div>
    </div>
    </template>``` **JS** ```javascript
    <script>
    export default { 
      name: 'prizeList',
      data() { 
        return { 
            luckyDrawShow: true,
            winner: "", //获奖者
            timer: null, //定时器
            times: 50, //抽奖速度
            len: null, //抽奖人数
            wIndex: null, //抽奖者位置
            draw: [], //抽奖者
            peopleList:[
                { teamCode:'A001',siteName:'蒋欣'},
                { teamCode:'A002',siteName:'景甜'},
                { teamCode:'A003',siteName:'王祖贤'},
                { teamCode:'A004',siteName:'汤唯'},
                { teamCode:'A005',siteName:'李丽珍'},
                { teamCode:'A006',siteName:'赵奕欢'},
                { teamCode:'A007',siteName:'刘德华'},
                { teamCode:'A008',siteName:'范冰冰'},
                { teamCode:'A009',siteName:'GAI(周延)'},
                { teamCode:'A010',siteName:'郭富城'},
                { teamCode:'A011',siteName:'刘诗诗'},
                { teamCode:'A012',siteName:'杨幂'},
                { teamCode:'A013',siteName:'迪丽热巴'},
                { teamCode:'A014',siteName:'黄奕'},
                { teamCode:'A015',siteName:'马思纯'},
                { teamCode:'A016',siteName:'唐嫣'},
                { teamCode:'A017',siteName:'佟丽娅'},
                { teamCode:'A018',siteName:'苍井空'},
                { teamCode:'A019',siteName:'刘亦菲'},
                { teamCode:'A020',siteName:'古力娜扎'},
                { teamCode:'A021',siteName:'章子怡'},
                { teamCode:'A022',siteName:'伊妮'},
                { teamCode:'A023',siteName:'张馨予'},
                { teamCode:'A024',siteName:'张碧晨'},
                { teamCode:'A025',siteName:'李沁'},
                { teamCode:'A026',siteName:'江疏影'},
                { teamCode:'A027',siteName:'柳岩'},
                { teamCode:'A028',siteName:'王鸥'},
                { teamCode:'A029',siteName:'高圆圆'},
                { teamCode:'A030',siteName:'陈妍希'},
                { teamCode:'A030',siteName:'韩雪'},
            ],
            isAction:false,
            isActionTxt:'开始'
        }
      },
      methods: { 
          tabDraw: function(){ 
              if(!this.isAction){ 
                  if(this.isActionTxt === '再次抽奖'){ //回到选择要抽的奖项状态
    
                  }else{ 
                    this.isAction = true
                    this.isActionTxt = '停止'
                    this.start()
                  }
              }else{ 
                 this.isAction = false
                 this.isActionTxt = '再次抽奖'
                 this.end() 
              }
          },
          start: function() {  //开始抽奖
                this.len = this.len || this.draw.length; //获取抽奖人数
                if (!this.timer) {  //如果抽奖不是正在进行中则开始抽奖
                    this.getWinner();
                    this.timer = setInterval(function() { 
                        this.getWinner();
                    }.bind(this), this.times)
                }
            },
            getWinner: function() {  //根据随机数找到当前的中奖者 
                this.wIndex = this.GetRandom(0, this.len - 1);
                this.winner = this.draw[this.wIndex].name + " " + this.draw[this.wIndex].tel;
            },
            end: function() {  //结束抽奖
                clearInterval(this.timer);
                this.timer = null;
            },
            GetRandom: function(Min, Max) {  //随机数
                return Min + (Math.floor(Math.random() * (Max - Min)));
            }
      },
      watch: { 
            luckyDrawShow: function() { 
                if (!this.luckyDrawShow) {  //弹窗关闭时，清除定时器与中奖者
                    this.end();
                    this.winner = "";
                }
            }
      },
      created() { 
          
      },
      mounted() { 
          var draws = document.getElementById("j_list").getElementsByTagName("p");
            for (var i = 0; i < draws.length; i++) { 
                this.draw.push({ 
                    name: draws[i].getElementsByClassName("name")[0].innerHTML,
                    tel: draws[i].getElementsByClassName("tell")[0].innerHTML
                })
            }
      }
    }
    </script>

**CSS:**