<template>
? <div class="home">
? ? <button @click="start">開始</button>
? ? <div
? ? ? class="grid"
? ? ? v-for="(item, i) in arr"
? ? ? :key="i"
? ? ? :class="[bg == i + 1 ? 'active' : null]"
? ? ></div>
? </div>
</template>

<script>

export default {
? name: "Home",
? data() {
? ? return {
? ? ? // 標記轉動的位置
? ? ? bg: 1,
? ? ? // 循環(huán)的獎品數組
? ? ? arr: [1, 2, 3, 4, 5],
? ? ? // 是否正在轉動的標記
? ? ? isSport: false,
? ? ? // 轉動速度減慢
? ? ? reduce: 10,
? ? ? // 轉動間隔時間
? ? ? startTime: 30,
? ? ? area:''
? ? };
? },
? methods: {
? ? start() {
? ? ? if (this.isSport == false) {
? ? ? ? this.isSport = true;
? ? ? } else {
? ? ? ? // 正在轉動時點擊按鈕無效
? ? ? ? return;
? ? ? }
? ? ? // 模擬的設定轉動的位置
? ? ? this.area= parseInt(Math.random()*4+1);
? ? ? this.go();
? ? },
? ? go() {
? ? ? setTimeout(() => {
? ? ? ? // 讓轉動速度減慢
? ? ? ? this.startTime = this.startTime + this.reduce;
? ? ? ? this.bg = (this.bg % 5) + 1;//這個%時求余的意識哦
? ? ? ? // 如果達到這個條件則停止跳動
? ? ? ? if (this.startTime >= 300 && this.bg == this.area) {
? ? ? ? ? // 標記是否轉動狀態(tài)
? ? ? ? ? this.isSport = false;
? ? ? ? ? // 重置轉動間隔時間
? ? ? ? ? this.startTime = 30;
? ? ? ? ? return;
? ? ? ? }
? ? ? ? this.go();
? ? ? }, this.startTime);
? ? },
? },
};
</script>
<style scoped>
.grid {
? width: 50px;
? height: 50px;
? background: red;
? margin: 10px;
}
.active {
? background: blue;
}
</style>