vue转盘抽奖插件,vue抽奖九宫格转盘
这篇文章主要为大家详细介绍了某视频剪辑软件实现大转盘抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现大转盘抽奖的具体代码，供大家参考，具体内容如下
效果图如下
中奖提示
代码如下
模板
div class= dial v-we chat-title= $ route。meta。标题
div class=" times "抽奖次数{{LuckyClick}}/div
！-转盘包裹-
div class=旋转
！-绘制圆点-
差异
:class=circle circle_ index
v-for=(item，index) in circleList
:key=index
:style={background:index%2==0？ colorclefirst:colorclesecond }
/div
！-转盘图片-
图片
盘子
src=././assets/dial.png
:style={transform:rotate_deg，transition:rotate_transition}
/
！-指针图片-
img class=指针src=././资产/点击。png @ click= start /
/div
/div
/模板
脚本
var light _ timer//灯光定时器
导出默认值{
名称：拨号，
data() {
返回{
幸运点击：3,
circleList: []，//原点设置
colorclefirst:"# fe4d 32 "，//圆点颜色
colorcolsecond:"# fff "，//圆点颜色
猫：45,//总共8个扇形区域，每个区域约45度
isAllowClick: true，//是否能够点击
rotate_deg: 0，//指针旋转的角度
rotate_transition:变换3s渐出//初始化选中的过度属性控制
};
},
组件：{
//日历：日历
},
已创建(){
这个。showcirclelist()；
},
观察：{},
已安装(){},
方法：{
//绘制圆点设置
showcircleList() {
设圈列表=[]；
for(var I=0；i 16i ) {
圈单。推(一)；
}
这个。圈子列表=圈子列表；
这个。light()；
},
//闪动效果
灯：函数(){
变那个=这个
清除间隔(light _ timer)；
light _ timer=setInterval(function(){
如果(那个。colorcelfirst== # fe4d 32 ){
that.colorCircleFirst= # fff
that.colorCircleSecond= # FE4D32
}否则{
that.colorCircleFirst= # FE4D32
that.colorCircleSecond= # fff
}
}, 300);//设置圆点闪烁的效果
},
start() {
如果（这个. LuckyClick==0) {
警报(机会已经用完了);
返回；
}
这个。旋转()；
},
旋转(){
如果(!this.isAllowClick)返回；
this.isAllowClick=false
这个。rotate _ transition= transform 3s ease-in-out ；
这个10 .幸运点击-；
var rand _ circle=5；//默认多旋转5圈
//var中奖指数=数学。地板(数学。random()* 8)；//获奖的下标0-7 没有概率每个平均
var中奖指数=这个。set()；//设置了概率的
控制台。log(获奖指数)；
var randomDeg=360-winningIndex * 45；//当前下标对应的角度45是总共8个扇形区域，每个区域约45度
var deg=rand _ circle * 360 randomDeg；//将要旋转的度数由于是顺时针的转动方向需要用360度来减
这个。rotate _ deg= rotate( deg deg)；
变那个=这个
setTimeout(function() {
that.isAllowClick=true
那个。rotate _ deg= rotate( 0 deg)；//定时器关闭的时候重置角度
那个。rotate _ transition=
if (winningIndex==0) {
警报(恭喜您，IphoneX’)；
} else if (winningIndex==1) {
警报(恭喜您，获得10元现金);
} else if (winningIndex==2) {
警报(很遗憾，重在参与);
} else if (winningIndex==3) {
警报(恭喜您，获得30元现金);
} else if (winningIndex==4) {
警报(恭喜您，获得20元现金);
} else if (winningIndex==5) {
警报(恭喜您，获得50元现金);
} else if (winningIndex==6) {
警报(恭喜您，获得5元现金);
} else if (winningIndex==7) {
警报(恭喜您，获得100元现金);
}
}, 3500);
},
//设置概率
set() {
var winIndex
//方法一
//if(数学。地板(数学。random()* 100)30){
//console.log(30%的概率，重在参与);
//winIndex=2；
//}否则如果(数学。地板(数学。random()* 100)55){
//console.log(25%的概率，5元);
//winIndex=6；
//}否则如果(数学。地板(数学。random()* 100)75){
//console.log(20%的概率，10元);
//winIndex=1；
//}否则如果(数学。地板(数学。random()* 100)85){
//console.log(10%的概率，20元);
//winIndex=4；
//}否则如果(数学。地板(数学。random()* 100)92){
//console.log(7%的概率，30元);
//winIndex=3；
//}否则如果(数学。地板(数学。random()* 100)97){
//console.log(5%的概率，50元);
//winIndex=5；
//}否则如果(数学。地板(数学。random()* 100)99){
//console.log(2%的概率，100元);
//winIndex=7；
//} else if(数学。地板(数学。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；
返回winIndex
}
},
计算值：{}
};
/脚本
样式范围的语言=scss
@导入././common/common ；次数{
文本对齐：居中；
行高：0.8雷姆；
背景：# fff
}。旋转{
宽度：6.1雷姆；
身高：6.1雷姆；
背景：# ffbe04
边界半径：50%;
显示器：flex
伸缩方向：列；
对齐-项目：居中；
对齐-内容：居中；
位置：绝对；
top:48%；
左：50%;
transform: translate(-50%，-50%)；
}。旋转。盘子{
宽度：5.5雷姆；
身高：5.5雷姆；
}。指针{
宽度：1.39雷姆；
身高：2.03雷姆；
位置：绝对；
top:46%；
左：50%;
transform: translate(-50%，-50%)；
}
/* 圆点*/。旋转。圆圈{
位置：绝对；
显示：块；
边界半径：50%;
身高：0.16雷姆；
宽度：0.16雷姆；
背景：黑色；
}。旋转。圆圈_0 {
顶部：0.08雷姆；
左：2.92雷姆；
}。旋转. circle_1 {
顶部：0.28雷姆；
左：4.05雷姆；
}。旋转第2圈{。
顶部：0.86雷姆；
左：4.95雷姆；
}。旋转。圆圈_3 {
顶部：1.85雷姆；
左：5.65雷姆；
}。旋转. circle_4 {
顶部：2.85雷姆；
右：0.1人民币；
}。旋转. circle_5 {
底部：1.89雷姆；
右：0.29雷姆；
}。旋转. circle_6 {
底部：0.96雷姆；
右：0.88雷姆；
}。旋转. circle_7 {
底部：0.34雷姆；
右：1.76雷姆；
}。旋转. circle_8 {
底部：0.06雷姆；
右：3.06雷姆；
}。旋转. circle_9 {
底部：0.28雷姆；
左：1.9雷姆；
}。旋转。圆圈_10 {
底部：0.96雷姆；
左：0.88雷姆；
}。旋转. circle_11 {
底部：1.82雷姆；
左：0.28雷姆；
}。旋转. circle_12 {
顶部：2.9雷姆；
左：0.1雷姆；
}。旋转. circle_13 {
顶部：1.9雷姆；
左：0.28雷姆；
}。旋转. circle_14 {
顶部：1雷姆；
左：0.86雷姆；
}。旋转. circle_15 {
顶部：0.32雷姆；
左：1.76雷姆；
}
/风格
本文中用到的图片
大转盘图片如下
指针的图片如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。