vue实现抽奖转盘,vue数字滚动插件
这篇文章主要为大家详细介绍了某视频剪辑软件组件实现数字滚动抽奖效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件组件实现数字滚动抽奖效果的具体代码，供大家参考，具体内容如下
可调整数字滚动速度，可指定开奖延迟时间，可指定开奖数字，按个人需求自行改动（录了个效果供参考，临时找的录屏，表介意)
不一一精简了
组件代码
模板
div class= info-span 04 style= color:# 333333；
中奖号码：
div style= vertical-align:middle；显示：内嵌块；
div class= open number v-for=(item，index) in awardCode
div class=num mui-text-center
div class=span value
过渡名称=向下-向上-平移-淡化
div:key= item。值“{ item。值} }/div
/过渡
/div
/div
/div
/div
/div
/模板
脚本
导出默认值{
名称：数字滚动，
data () {
返回{
区间：空，
interval_one: null，
间隔2:空
奖励代码：[
{名称： 一位数，值：?},
{名称： tenDigit ，值：?},
{名称： 百分位数，值：?}
],
}
},
道具：{
},
//开奖效果方法
方法：{
start() {
var _ this=this
如果(!this.interval) {
设i=0
这个。interval=setInterval(function(){
_this.awardCode[0].value=i=9？我：(i=-1，I)
}, 100)
}
},
结束（一){
this.awardCode[0].value=I；
this.show=！这个。显示
clearInterval(this.interval)
this.interval=null
},
start_one() {
var _ this=this
如果(!this.interval_one) {
让j=0
这个。interval _ one=setInterval(function(){
_this.awardCode[1].value=j=9？j : (j=-1，j)
}, 100)
}
},
end_one(j) {
this.awardCode[1].value=j；
清除间隔(这个。间隔_一)
this.interval_one=null
},
start_two() {
this.show_two=！这个。展示_二
var _ this=this
设k=0
如果(!this.interval_two) {
这个。interval _ two=setInterval(function(){
//_这个。k=数学。地板(数学。random()* 10)；
//if (k 10) {
//_this.awardCode[2].值=k；
//}其他{
//k=0
//_this.awardCode[2].值=k；
//}
_this.awardCode[2].值=k=9？k : (k=-1，k)
}, 100)
}
},
end_two(k) {
这是一个奖励代码.值=k；
this.show_two=！这个。展示_二
clearInterval(这个。间隔_二)
this.interval_two=null
},
prizeNumber(代码){
this.awardCode[0].value=code.substr(0，1)
this.awardCode[1].value=code.substr(1，1)
this.awardCode[2].value=code.substr(2，1)
},
},
销毁前：函数(){
if(this.interval){
clearInterval(this.interval)
}
如果(this.interval_one){
清除间隔(这个。间隔_一)
}
如果(this.interval_two){
clearInterval(这个。间隔_二)
}
}
}
/脚本
样式lang=scss 范围。开放号码{
显示：内嵌-块；
宽度：大众(52)；
身高：大众(52);
填充-右：大众(36)；数量{
宽度：大众(52)；
身高：大众(52);
溢出：隐藏；跨度{
颜色：# fff
宽度：大众(52)；
身高：大众(52);
字体粗细：粗体；
浮动：左；跨度div
文本对齐：居中；
}
}。向下-向上-平移-淡入-激活，向下-向上-平移-淡化-保持活动{
过渡：全。1;
-网络工具包-过渡：全是。1;
-moz-过渡：全。1;
-o-转换：全是。1;
}。向下-向上-平移-淡入，向下-向上-平移-淡化-保持活动{
不透明度：1;
}。向下-向上-平移-淡化-保持活动{
transform:平移y(-50px)；
-WebKit-transform:translate y(-50px)；
-moz-transform:平移y(-50px)；
表示“具有…性质的”变换：平移y(-50px)；
}。价值{
背景：url(./images/pokin hall-获奖。png’)无重复顶部居中；
背景尺寸：100% 100%;
宽度：大众(52)；
身高：大众(52);
行高：大众(52)；
字体大小：22px
字体粗细：粗体；
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。