js zum Implementieren des Quellcodes für zufällige Mahlzeitenauswahleffekte

Als ich frei war, sah ich einen interessanten zufälligen Essensauswahleffekt, also habe ich einige Zeit damit verbracht, ihn zu implementieren. Der Code lautet wie folgt.

<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>