Vue实现简单九宫格抽奖

抽奖
这个是一个简单的抽奖,具体的图文根据需要添加即可
思路:

1. 开启一个定时器
2. 获取一个一定范围的随机数字,赋值给对应奖品的索引
3. 在一定时间关闭定时器,

HTML

<div>
      <ul class="draw">
        <li class="options"> 
          <img src="@/assets/fj7.jpg" alt="" />
        </li>
        <li class="options">吕布</li>
        <li class="options">王昭君</li>
        <li class="options">大乔</li>
        <li @click="onStart">开始</li>
        <li class="options">小乔</li>
        <li class="options">安琪拉</li>
        <li class="options">西施</li>
        <li class="options">谢谢惠顾</li>
      </ul>
    </div>

JS

data() {
    return {
      num: 0,
      timer: null
    }
  },
 methods: {
    onStart() {
      this.$nextTick(() => {
        if (this.timer === null) {
          this.timer = setInterval(() => {
            this.num++
            const lis = document.querySelectorAll('.draw .options')
            // 获得随机数0-7
            const ran = Math.round(Math.random() * (7 - 0) + 0) 
            lis.forEach(item => {
              item.style.backgroundColor = '#fff'
            })
            lis[ran].style.backgroundColor = 'red'
            if (this.num >= 50) {
              // 根据业务关定时器
              clearInterval(this.timer)
              this.timer = null
              this.num = 0
            }
          }, 100)
        }
      })
    }
  }

CSS

* {
  margin: 0;
  padding: 0;
}
ul {
  width: 602px;
  height: 601px;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  font-weight: bold;

  li {
    width: 200px;
    height: 200px;
    border-bottom: 1px solid red;
    border-right: 1px solid red;
    background-color: #fff;
    list-style: none;
    text-align: center;
    line-height: 200px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  & li:nth-child(5) {
    background-color: pink;
  }
  & li:nth-child(3n) {
    border-right: 0;
  }
}

我欲乘风归去，又恐琼楼玉宇