vue抽奖大转盘,vue抽奖程序

　　本文主要详细介绍vue简单转盘抽奖功能的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue实现简单转盘抽奖的具体代码，供大家参考。具体内容如下

　　请忽略风格(自己调整)，主要看JS代码实现。单击按钮后，调用start方法确定它是否在旋转。如果不是旋转，调用go方法，主要封装一个一次性定时器，是递归函数。调用go函数后，可以实现抽奖转盘效果。详细代码如下：

　　评论很明确。

　　模板

　　div class=home

　　按钮@click=start 开始/按钮

　　差异

　　class=grid

　　v-for=(item，i) in arr

　　:key=i

　　当前位置active : null]

　　/div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　姓名：家，

　　data() {

　　返回{

　　//标记旋转的位置

　　bg: 1，

　　//循环的奖励数组

　　arr: [1，2，3，4，5]，

　　//它是否正在旋转的标志

　　isSport:假的，

　　//旋转速度变慢

　　减少：10，

　　//旋转间隔时间

　　开始时间：30，

　　区域：“”

　　};

　　},

　　方法：{

　　start() {

　　if (this.isSport==false) {

　　this.isSport=true

　　}否则{

　　//在按钮旋转时单击按钮是无效的。

　　返回；

　　}

　　//模拟设定旋转位置

　　this . area=parse int(math . random()* 4 1)；

　　this . go()；

　　},

　　go() {

　　setTimeout(()={

　　//让旋转速度慢下来

　　this . start time=this . start time this . reduce；

　　this . BG=(this . BG % 5)1；//这%的求盈意识！

　　//如果达到此条件，则停止跳动

　　if(this . start time=300 this . BG==this . area){

　　//标记是否旋转。

　　this.isSport=false

　　//重置旋转间隔时间

　　this.startTime=30

　　返回；

　　}

　　this . go()；

　　}，this . start time)；

　　},

　　},

　　};

　　/脚本

　　样式范围。网格{

　　宽度：50px

　　高度：50px

　　背景：红色；

　　边距：10px

　　}。活动{

　　背景：蓝色；

　　}

　　/风格

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。