vue實現(xiàn)簡單轉(zhuǎn)盤抽獎功能

更新時間：2022年03月09日 10:04:37 作者：jiyuchengzhou

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單轉(zhuǎn)盤抽獎功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)簡單轉(zhuǎn)盤抽獎的具體代碼，供大家參考，具體內(nèi)容如下

樣式請大家忽略（自己調(diào)），主要看JS代碼實現(xiàn)，點擊按鈕后調(diào)用start方法，判斷是否在轉(zhuǎn)動狀態(tài)，如果沒轉(zhuǎn)動則調(diào)用go方法，go方法主要封裝了一次性定時器，是個遞歸函數(shù)，調(diào)用go函數(shù)后即可實現(xiàn)抽獎轉(zhuǎn)盤的效果了，詳細(xì)代碼如下：

注釋清晰哦

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: