vue實現(xiàn)大轉(zhuǎn)盤抽獎功能
更新時間：2022年03月08日 11:28:50 作者：面壁思過程
這篇文章主要為大家詳細介紹了vue實現(xiàn)大轉(zhuǎn)盤抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)大轉(zhuǎn)盤抽獎的具體代碼，供大家參考，具體內(nèi)容如下
效果圖如下
中獎提示
代碼如下
<template>
? <div class="dial" v-wechat-title="$route.meta.title">
? ? <div class="times">抽獎次數(shù){{LuckyClick}}</div>
? ? <!-- 轉(zhuǎn)盤包裹 -->
? ? <div class="rotate">
? ? ? <!-- 繪制圓點 -->
? ? ? <div
? ? ? ? :class="'circle circle_'+index"
? ? ? ? v-for="(item,index) in circleList"
? ? ? ? :key="index"
? ? ? ? :style="{background:index%2==0?colorCircleFirst:colorCircleSecond}"
? ? ? ></div>
? ? ? <!-- 轉(zhuǎn)盤圖片 -->
? ? ? <img
? ? ? ? class="dish"
? ? ? ? src="../../assets/dial.png"
? ? ? ? :style="{transform:rotate_deg,transition:rotate_transition}"
? ? ? />
? ? ? <!-- 指針圖片 -->
? ? ? <img class="pointer" src="../../assets/click.png" @click="start" />
? ? </div>
? </div>
</template>
?
<script>
var light_timer; //燈光定時器
?
export default {
? name: "dial",
? data() {
? ? return {
? ? ? LuckyClick: 3,
? ? ? circleList: [], //原點設(shè)置
? ? ? colorCircleFirst: "#FE4D32", //圓點顏色
? ? ? colorCircleSecond: "#fff", //圓點顏色
?
? ? ? cat: 45, //總共8個扇形區(qū)域，每個區(qū)域約45度
? ? ? isAllowClick: true, //是否能夠點擊
? ? ? rotate_deg: 0, //指針旋轉(zhuǎn)的角度
? ? ? rotate_transition: "transform 3s ease-in-out" //初始化選中的過度屬性控制
? ? };
? },
?
? components: {
? ? // Calendar: Calendar
? },
? created() {
? ? this.showcircleList();
? },
?
? watch: {},
?
? mounted() {},
?
? methods: {
? ? //繪制圓點設(shè)置
? ? showcircleList() {
? ? ? let circleList = [];
? ? ? for (var i = 0; i < 16; i++) {
? ? ? ? circleList.push(i);
? ? ? }
? ? ? this.circleList = circleList;
? ? ? this.light();
? ? },
?
? ? //閃動效果
? ? light: function() {
? ? ? var that = this;
? ? ? clearInterval(light_timer);
? ? ? light_timer = setInterval(function() {
? ? ? ? if (that.colorCircleFirst == "#FE4D32") {
? ? ? ? ? that.colorCircleFirst = "#fff";
? ? ? ? ? that.colorCircleSecond = "#FE4D32";
? ? ? ? } else {
? ? ? ? ? that.colorCircleFirst = "#FE4D32";
? ? ? ? ? that.colorCircleSecond = "#fff";
? ? ? ? }
? ? ? }, 300); //設(shè)置圓點閃爍的效果
? ? },
?
? ? start() {
? ? ? if (this.LuckyClick == 0) {
? ? ? ? alert("機會已經(jīng)用完了");
? ? ? ? return;
? ? ? }
? ? ? this.rotating();
? ? },
?
? ? rotating() {
? ? ? if (!this.isAllowClick) return;
? ? ? this.isAllowClick = false;
? ? ? this.rotate_transition = "transform 3s ease-in-out";
? ? ? this.LuckyClick--;
? ? ? var rand_circle = 5; //默認多旋轉(zhuǎn)5圈
? ? ? // ? var winningIndex = Math.floor(Math.random() * 8); //獲獎的下標 ? 0-7 ? 沒有概率每個平均
? ? ? var winningIndex = this.set(); //設(shè)置了概率的
?
? ? ? console.log(winningIndex);
? ? ? var randomDeg = 360 - winningIndex * 45; //當前下標對應(yīng)的角度 ? ?45是總共8個扇形區(qū)域，每個區(qū)域約45度
?
? ? ? var deg = rand_circle * 360 + randomDeg; //將要旋轉(zhuǎn)的度數(shù) ?由于是順時針的轉(zhuǎn)動方向需要用360度來減
? ? ? this.rotate_deg = "rotate(" + deg + "deg)";
?
? ? ? var that = this;
? ? ? setTimeout(function() {
? ? ? ? that.isAllowClick = true;
? ? ? ? that.rotate_deg = "rotate(" + 0 + "deg)"; //定時器關(guān)閉的時候重置角度
? ? ? ? that.rotate_transition = "";
?
? ? ? ? if (winningIndex == 0) {
? ? ? ? ? alert("恭喜您，IphoneX");
? ? ? ? } else if (winningIndex == 1) {
? ? ? ? ? alert("恭喜您，獲得10元現(xiàn)金");
? ? ? ? } else if (winningIndex == 2) {
? ? ? ? ? alert("很遺憾，重在參與");
? ? ? ? } else if (winningIndex == 3) {
? ? ? ? ? alert("恭喜您，獲得30元現(xiàn)金");
? ? ? ? } else if (winningIndex == 4) {
? ? ? ? ? alert("恭喜您，獲得20元現(xiàn)金");
? ? ? ? } else if (winningIndex == 5) {
? ? ? ? ? alert("恭喜您，獲得50元現(xiàn)金");
? ? ? ? } else if (winningIndex == 6) {
? ? ? ? ? alert("恭喜您，獲得5元現(xiàn)金");
? ? ? ? } else if (winningIndex == 7) {
? ? ? ? ? alert("恭喜您，獲得100元現(xiàn)金");
? ? ? ? }
? ? ? }, 3500);
? ? },
?
? ? //設(shè)置概率
? ? set() {
? ? ? var winIndex;
? ? //方法1
? ? // ? if (Math.floor(Math.random() * 100) < 30) {
? ? // ? ? console.log("30%的概率,重在參與");
? ? // ? ? winIndex = 2;
? ? // ? } else if (Math.floor(Math.random() * 100) < 55) {
? ? // ? ? console.log("25%的概率,5元");
? ? // ? ? winIndex = 6;
? ? // ? } else if (Math.floor(Math.random() * 100) < 75) {
? ? // ? ? console.log("20%的概率,10元");
? ? // ? ? winIndex = 1;
? ? // ? } else if (Math.floor(Math.random() * 100) < 85) {
? ? // ? ? console.log("10%的概率,20元");
? ? // ? ? winIndex = 4;
? ? // ? } else if (Math.floor(Math.random() * 100) < 92) {
? ? // ? ? console.log("7%的概率,30元");
? ? // ? ? winIndex = 3;
? ? // ? } else if (Math.floor(Math.random() * 100) < 97) {
? ? // ? ? console.log("5%的概率,50元");
? ? // ? ? winIndex = 5;
? ? // ? } else if (Math.floor(Math.random() * 100) < 99) {
? ? // ? ? console.log("2%的概率,100元");
? ? // ? ? winIndex = 7;
? ? // ? } else if (Math.floor(Math.random() * 100) == 99) {
? ? // ? ? console.log("1%的概率,IphoneX");
? ? // ? ? winIndex = 0;
? ? // ? }
? ? ??
?
? ? ? //方法2
? ? ? var __rand__ = Math.random();
? ? ? if (__rand__ < 0.3) winIndex = 2;
? ? ? else if (__rand__ < 0.55) winIndex = 6;
? ? ? else if (__rand__ < 0.75) winIndex = 1;
? ? ? else if (__rand__ < 0.85) winIndex = 4;
? ? ? else if (__rand__ < 0.92) winIndex = 3;
? ? ? else if (__rand__ < 0.97) winIndex = 5;
? ? ? else if (__rand__ < 0.99) winIndex = 7;
? ? ? else if (__rand__ = 0.99) winIndex = 0;
?
? ? ? return winIndex;
? ? }
? },
?
? computed: {}
};
</script>
?
?
<style ?scoped lang="scss">
@import "../../common/common";
.times {
? text-align: center;
? line-height: 0.8rem;
? background: #fff;
}
.rotate {
? width: 6.1rem;
? height: 6.1rem;
? background: #ffbe04;
? border-radius: 50%;
? display: flex;
? flex-direction: column;
? align-items: center;
? justify-content: center;
? position: absolute;
? top: 48%;
? left: 50%;
? transform: translate(-50%, -50%);
}
?
.rotate .dish {
? width: 5.5rem;
? height: 5.5rem;
}
?
.pointer {
? width: 1.39rem;
? height: 2.03rem;
? position: absolute;
? top: 46%;
? left: 50%;
? transform: translate(-50%, -50%);
}
?
/* 圓點 */
.rotate .circle {
? position: absolute;
? display: block;
? border-radius: 50%;
? height: 0.16rem;
? width: 0.16rem;
? background: black;
}
?
.rotate .circle_0 {
? top: 0.08rem;
? left: 2.92rem;
}
?
.rotate .circle_1 {
? top: 0.28rem;
? left: 4.05rem;
}
?
.rotate .circle_2 {
? top: 0.86rem;
? left: 4.95rem;
}
?
.rotate .circle_3 {
? top: 1.85rem;
? left: 5.65rem;
}
?
.rotate .circle_4 {
? top: 2.85rem;
? right: 0.1rem;
}
?
.rotate .circle_5 {
? bottom: 1.89rem;
? right: 0.29rem;
}
?
.rotate .circle_6 {
? bottom: 0.96rem;
? right: 0.88rem;
}
?
.rotate .circle_7 {
? bottom: 0.34rem;
? right: 1.76rem;
}
?
.rotate .circle_8 {
? bottom: 0.06rem;
? right: 3.06rem;
}
?
.rotate .circle_9 {
? bottom: 0.28rem;
? left: 1.9rem;
}
?
.rotate .circle_10 {
? bottom: 0.96rem;
? left: 0.88rem;
}
?
.rotate .circle_11 {
? bottom: 1.82rem;
? left: 0.28rem;
}
?
.rotate .circle_12 {
? top: 2.9rem;
? left: 0.1rem;
}
?
.rotate .circle_13 {
? top: 1.9rem;
? left: 0.28rem;
}
?
.rotate .circle_14 {
? top: 1rem;
? left: 0.86rem;
}
?
.rotate .circle_15 {
? top: 0.32rem;
? left: 1.76rem;
}
</style>本文中用到的圖片
大轉(zhuǎn)盤圖片如下
指針的圖片如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue動態(tài)修改網(wǎng)頁標題的方法及遇到問題
Vue下有很多的方式去修改網(wǎng)頁標題，這里總結(jié)下解決此問題的幾種方案:,需要的朋友可以參考下2019-06-06
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等類型的值，在 JavaScript 中，原始值是按值傳遞的，引用類型是按引用傳遞的，這意味著，如果一個函數(shù)接收了一個原始值作為參數(shù)，那么形參和實參之間是沒有引用關(guān)系的，它們是完全獨立的兩個值2023-01-01
這篇文章主要為大家詳細介紹了vue+elementUi圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要介紹了vue中watch如何同時監(jiān)聽多個屬性,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue3+vite 動態(tài)引用靜態(tài)資源及動態(tài)引入assets文件夾圖片的多種方式
通過require動態(tài)引入, 發(fā)現(xiàn)報錯：require is not defind,這是因為 require 是屬于 Webpack 的方法,本文給大家介紹vue3+vite 動態(tài)引用靜態(tài)資源及動態(tài)引入assets文件夾圖片的多種方式,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue項目實現(xiàn)自定義滑塊過渡效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue-drag-resize與輸入框/文本框沖突問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
今天小編就為大家分享一篇關(guān)于vue.js指令v-for使用以及下標索引的獲取，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
今天小編就為大家分享一篇當vue路由變化時,改變導(dǎo)航欄的樣式方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
其實h()函數(shù)和createVNode()函數(shù)都是創(chuàng)建dom節(jié)點,他們的作用是一樣的,下面這篇文章主要給大家介紹了關(guān)于vue3中h函數(shù)的常用使用方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08