vue 实现九宫格抽奖功能
效果演示：
运行原理：通过定时器和三元表达式来切换奖品的class名。
HTML代码：
<template> <div class="content"> <div class="square" :class="arr[0] ? 'active' : ''">1</div> <div class="square" :class="arr[1] ? 'active' : ''">2</div> <div class="square" :class="arr[2] ? 'active' : ''">3</div> </div> <div class="content"> <div class="square" :class="arr[7] ? 'active' : ''">8</div> <div class="square" @click="fun()" v-if="l">开始</div> <div class="square" v-if="s">开始</div> <div class="square" :class="arr[3] ? 'active' : ''">4</div> </div> <div class="content"> <div class="square" :class="arr[6] ? 'active' : ''">7</div> <div class="square" :class="arr[5] ? 'active' : ''">6</div> <div class="square" :class="arr[4] ? 'active' : ''">5</div> </div> </template>
通过v-if 来隐藏没有设置点击事件的开始按钮，当点击开始后，隐藏掉
拥有点击事件的开始按钮，防止多次点击出现的错误。
css代码：
<template> <div class="content"> <div class="square" :class="arr[0] ? 'active' : ''">1</div> <div class="square" :class="arr[1] ? 'active' : ''">2</div> <div class="square" :class="arr[2] ? 'active' : ''">3</div> </div> <div class="content"> <div class="square" :class="arr[7] ? 'active' : ''">8</div> <div class="square" @click="fun()" v-if="l">开始</div> <div class="square" v-if="s">开始</div> <div class="square" :class="arr[3] ? 'active' : ''">4</div> </div> <div class="content"> <div class="square" :class="arr[6] ? 'active' : ''">7</div> <div class="square" :class="arr[5] ? 'active' : ''">6</div> <div class="square" :class="arr[4] ? 'active' : ''">5</div> </div> </template>
js代码：
<script setup> import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed, } from "vue"; import { useRoute, useRouter } from "vue-router"; const arr = ref([0, 0, 0, 0, 0, 0, 0, 0]); const i = ref(-1); // 开始的位置 const time = ref(1000); //时间 const l = ref(true); // 让有点击事件的抽奖按钮默认显示 const s = ref(false); // 隐藏没有点击事件的按钮 // const g = [10, 20, 5, 5, 40, 5, 5, 5, 5]; //概率 const k = ref(0); // 圈数 1-2 减 3-7匀速 8-10 慢 // 开始抽奖 const fun = () => { // 随机数 const randoms = Math.floor(Math.random() * arr.value.length); l.value = false; s.value = true; //让拥有点击事件的按钮隐藏，否则多次点击 setTimeout(() => { arr.value = [0, 0, 0, 0, 0, 0, 0, 0]; if (i.value == 7) { k.value++; i.value = 0; } else { i.value++; } arr.value[i.value] = 1; if (k.value < 3) { if (time.value > 100) { time.value -= 100; } } else if (k.value > 7 && k.value < 11) { time.value += 100; } // 如果圈数小于9，就继续执行函数 if (k.value < 9) { fun(); } else { // 如果当前的位置在你确定的随机数上，就停止执行 if (i.value != randoms) { fun(); } else { k.value = 0; l.value = true; s.value = false; } } }, time.value); }; </script>
