一、前言

九宫格布局
注释了三种结果分支
懒得找图，背景色将就看一下
不足的地方，欢迎评论指正
二、代码注释详解

xml 复制代码
<template>
  <div class="box">
    <div class="raffleBox">
      <div :class="{ raffleTrem: true, active: data.classFlag == 1 }">富强</div>
      <div :class="{ raffleTrem: true, active: data.classFlag == 2 }">民主</div>
      <div :class="{ raffleTrem: true, active: data.classFlag == 3 }">文明</div>
      <div :class="{ raffleTrem: true, mt: true, active: data.classFlag == 8 }">法治</div>
      <button class="raffleStart mt" @click="raffleStart" :disabled="data.disabledFlag">{{ !data.raffleFlag ? '开始' : '结束'
      }}</button>
      <div :class="{ raffleTrem: true, mt: true, active: data.classFlag == 4 }">和谐</div>
      <div :class="{ raffleTrem: true, mt: true, active: data.classFlag == 7 }">公正</div>
      <div :class="{ raffleTrem: true, mt: true, active: data.classFlag == 6 }">平等</div>
      <div :class="{ raffleTrem: true, mt: true, active: data.classFlag == 5 }">自由</div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
const data = reactive({
  classFlag: 0,
  raffleFlag: false,
  setIntervalFlag: null,
  disabledFlag: false,
  setIntervalNum: 1,
  list: ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治']
})
//封装随机数,包含min, max值
const getRandom = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 封装定时器
const fn = (num) => {
  // 转动九宫格，如果到第八个重置为0再累加，否则进行累加
  data.setIntervalFlag = setInterval(() => {
    if (data.classFlag >= 8) {
      data.classFlag = 0
      data.classFlag++
    } else {
      data.classFlag++
    }
  }, num)
}
// 开始/结束
const raffleStart = () => {
  // 抽奖标识赋反
  data.raffleFlag = !data.raffleFlag

  if (data.raffleFlag == true) {
    // 禁用中间键
    data.disabledFlag = true
    // 延迟解禁用
    setTimeout(() => {
      data.disabledFlag = false
    }, 2000)
    // 开始
    // 转动九宫格
    fn(100)
  } else {
    data.disabledFlag = true
    // 结束
    let setIntervalA
    setIntervalA = setInterval(() => {
      if (data.setIntervalNum >= 6) {
        // 清除定时器
        clearInterval(data.setIntervalFlag)
        data.setIntervalFlag = null
        clearInterval(setIntervalA)
        setIntervalA = null
        // 解开禁用
        data.disabledFlag = false
        // 此处可以进行中奖之后的逻辑
        //例子1   随机结果
        // data.classFlag = 0
        // let prizeFlag = getRandom(1, 8)
        // let prizeTxt = data.list[prizeFlag - 1]
        // console.log(prizeTxt, '例子1');
        //例子2   当前值的结果
        // let prizeTxt2 = data.list[data.classFlag - 1]
        // console.log(prizeTxt2, '例子2');
        //例子3  某鹅常规操作
        data.classFlag = 0
        let confirmFlag = confirm("谢谢参与！请再接再励！");
        if (confirmFlag || !confirmFlag) {
          window.location.href = ""
        }
        return
      }
      // 累加定时器数字，用于缓慢停止定时器
      data.setIntervalNum++
      // 清除定时器
      clearInterval(data.setIntervalFlag)
      data.setIntervalFlag = null
      // 将当前累加数字作为参数计算，用于缓慢停止定时器
      fn(data.setIntervalNum * 100)
    }, 1500)
  }

  // data.classFlag = getRandom(1, 8)
}
// const { } = toRefs(data)
</script>
<style scoped lang="scss">
.box .raffleBox .active {
  border-color: red;
}

.mt {
  margin-top: 5px;
}

.raffleBox {
  width: 315px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
  box-sizing: border-box;

  .raffleTrem,
  .raffleStart {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0);
  }

  .raffleStart {
    background-color: aquamarine;
  }
}
</style>
VUE实现九宫格抽奖

一、前言

二、代码注释详解
