一、前言

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

二、代码注释详解

<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 = "https://juejin.cn/post/7306356286428594176"

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