js 实现随机抽取选餐效果源码

闲来没事看到一个比较有趣的随机选餐效果，于是自己花了点时间去是实现，代码如下。

<template>
  <div>
  <div class="est">
    <span
      v-for="(v, idx) in list"
      :key="idx"
      class="animate__animated animate__fadeIn"
      :style="{
        left: `${v.left}px`,
        top: `${v.top}px`,
        fontSize: `${v.fontSize + 10}px`,
        color: `${v.color}`
      }">
      {{v.name}}
    </span>
  </div>
  <div class="box">
    <button @click="start">{{!isStart ? '开始选餐' : '结束点餐'}}</button>
    <h2>你选中的是：{{name}}</h2>
  </div>
  </div>
</template>

<script>
const color = ['#d31051', '#d91ab9', '#1919e3', '#0e78ff', '#d6624d', '#4dd697', '#0b6a3e', '#cfda15', '#d39b10', '#d35710', '#d310b6'];
const data = `北京烤鸭、涮羊肉、仿膳宫廷菜、狗不理包子、春卷、酱鸡、酱汁肉、樱桃肉、松鼠桂鱼、糕团、桂发祥麻花、耳朵眼炸糕、天津银鱼、天津紫蟹、小站大米、锅巴菜、煎饼果子、炒肝、豆汁、烧麦、小窝头、萨奇马、打卤面、豌豆黄、果脯、桂花陈酒、六必居酱菜、王致和臭豆腐、浦东鸡、盐水火腿、春卷、酱鸡、酱汁肉、樱桃肉、北京烤鸭、涮羊肉、仿膳宫廷菜、狗不理包子、春卷、酱鸡、酱汁肉、樱桃肉、松鼠桂鱼、糕团、松鼠桂鱼、糕团、武昌鱼、老通城豆皮、四季美汤包、棉花糖、老大兴鲴鱼、狗不理包子、桂发祥麻花、耳朵眼炸糕、天津银鱼、天津紫蟹、小站大米、锅巴菜、煎饼果子、熏火腿、猪肉灌肠、蜜饯、五香豆、鸡肉灌包、北京烤鸭、涮羊肉、仿膳宫廷菜、狗不理包子、春卷、酱鸡、酱汁肉、樱桃肉、松鼠桂鱼、糕团、三黄鸡、鸡鸭血汤、油炸臭干子、大闸蟹、山城小汤圆、担担面、龙抄手、熨斗糕、珍珠圆子、鸡味锅贴、荷叶软饼、萝卜丝饼、凤尾酥、金鱼饺、开煲狗肉、炒田螺、烧鹅、叉烧包、虾饺子、沙河粉、烤小猪、金丝烩鱼翅、豹狸烩三蛇、玉兔饼、玲珑鱼脆羹、三色凉糕、香麻麻品酥、重庆火锅、板鸭、金钩豆瓣酱`
const foods = data.split('、'); // 食物数组
const max = 60; // 首屏显示菜品数量
const speed = 20; // 随机显示速度
const random = (max = max) => Math.floor(Math.random() * (max - 0 + 1)) + 0;
const position = () => {
  const left = Math.random() * (window.innerWidth - 0) + 0;
  const top = Math.random() * (window.innerHeight - 0) + 0;
  return {
    left,
    top
  };
};
export default {
  name: 'eat',
  data () {
    return {
      isStart: false,
      name: '',
      list: [],
    };
  },
  created () {
  },
  mounted () {
    this.int();
  },
  methods: {
    start () {
      // 结束点餐逻辑
      if (this.isStart) {
        const r = random(foods.length);
        this.name = foods[r];
        clearInterval(this.id);
        setTimeout(_ => {
          alert(`你选中的是：${this.name}`);
        }, 500);
      } else {
        this.id = setInterval(() => {
          this.getOne();
        }, speed);
      }
      this.isStart = !this.isStart;
    },
    // 将第一个元素推出去，随机压入一个元素
    getOne () {
      this.list.shift();
      let index = random(max);
      this.list.push({
        name: foods[index],
        left: position().left,
        top: position().top,
        fontSize: random(max),
        color: color[random(11)]
      });
    },
    // 初始化显示首屏效果
    int () {
      const list = [];
      this.list = [];
      for (let i = 0; i < max; i++) {
        let index = random(max);
        list.push({
          name: foods[index],
          left: position().left,
          top: position().top,
          fontSize: random(max),
          color: color[random(11)]
        });
      }
      this.list = list;
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  // display: flex;
  align-items: center;
  position: fixed;
  left: 45%;
  top: 40%;
  width: 200px;
  height: 200px;
  padding-top: 50px;
  background: #fff;
  text-align: center;
  border: 1px solid #ccc;
  flex-wrap: wrap;
  h2 {
    margin: 20px 0;
  }
}
.est {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  span {
    display: inline-block;
    position: absolute;
  }
}
</style>