转盘抽奖图片html,html转盘抽奖

更新记录

1.0.0(2020-05-06)

v1.0.0

导入组件

import myTurntableDraw from '@/components/my-turntable-draw/my-turntable-draw'

使用组件

ref="raffleWheel"

:width="boxData.width"

:height="boxData.height"

:prizeList="prizeList"

:targetIndex="targetIndex"

@befoterClick="befoterClick"

@afterClick="afterClick"

配置参数

参数

类型

说明

width

Number

转盘宽

height

Number

转盘高

prizeList

Object

奖品信息列表

targetIndex

Number/String

获奖下标

prizeList

奖品名称

奖品图片

奖品库存

name

count

image

插件初始化

this.prizeList = Array

若初始化失败，请手动调用setView方法

this.$refs.raffleWheel.setView()

回调函数

befoterClick: 开始抽奖

befoterClick(data) {

if(data.type == 'start') {

console.log('开始抽奖')

// 获取中奖单位下标

let _n = Math.floor(Math.random() * this.prizeList.length)

console.log('选中商品项：' + _n)

console.log('选中商品名：' + this.prizeList[_n].name)

this.targetIndex = _n

data.callback && data.callback(_n)

}

afterClick: 结束抽奖

afterClick(data) {

if(data.type == 'end') {

console.log(data.content.count)

data.callback && data.callback()

}

重复调用开始抽奖示例

// 多次执行

toBefoterClick(n) {

console.log('剩余次数：' + this.indexNum)

if(this.indexNum <= 0) {return false}

setTimeout(() => {

this.indexNum--

this.$refs.raffleWheel.handleAction()

}, 100)

}

afterClick(data) {

if(data.type == 'end') {

console.log(data.content.count)

data.callback && data.callback()

// 多次执行

this.toBefoterClick()

}

转盘抽奖图片html,html转盘抽奖相关推荐

Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘
Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘原型演示及下载地址:https://www.p ...
php比赛票数造假算法,PHP可以修改概率的抽奖算法（例如转盘等，个人感觉蛮好用）...
近几天要给网站加一个转盘抽奖的的功能,我们知道转盘抽奖这些一般情况是小件物品的中间概率远大于大件物品,这样一方面能安慰抽奖用户,另一方面对于抽奖获得的举办者不至于亏损,看下面的代码: //概率算法,6 ...
php限制一天抽奖次数_PHP可以修改概率的抽奖算法（例如转盘等，个人感觉蛮好用）...
近几天要给网站加一个转盘抽奖的的功能,我们知道转盘抽奖这些一般情况是小件物品的中间概率远大于大件物品,这样一方面能安慰抽奖用户,另一方面对于抽奖获得的举办者不至于亏损,看下面的代码: //概率算法,6 ...
php答题抽奖源码,PHP转盘抽奖接口实例
本文实例讲述了PHP转盘抽奖接口的实现方法.分享给大家供大家参考.具体如下: 这里的转盘抽奖随机返回一个转盘角度,概率可自己定义 lottery_get.php接口文件如下: /*session_st ...
php实现抽奖接口实例,PHP转盘抽奖接口实例_PHP教程
PHP转盘抽奖接口实例这篇文章主要介绍了PHP转盘抽奖接口的实现方法,实例分析了随机抽奖接口的实现原理与对应数据库操作的技巧,需要的朋友可以参考下本文实例讲述了PHP转盘抽奖接口的实现方法.分享给 ...
jquery实现图片随机切换、抽奖功能
jquery实现图片随机切换.抽奖功能效果图: 源代码: HTML: <body> <div id="div1">&l ...
html css年会照片抽奖,利用css实现一个抽奖动画效果
首先我们先来看下最终的运行效果: 从效果图我们可以看到,抽奖会自动进行,并显示中奖信息. 这个效果基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 具体步骤如下: 首先画一个转盘 ...
php转盘中奖率,PHP大转盘中奖概率算法实例_PHP
本文实例讲述了PHP大转盘中奖概率算法的实现方法,分享给大家供大家参考.具体如下: 大转盘是最近很多线上网动中一个比较有意思的东西了,下面我们就来看看这个大转盘中奖概率算法与例子,希望对各位有所帮助. ...
java 抽奖_JAVA基于权重的抽奖
https://blog.csdn.net/huyuyang6688/article/details/50480687 如有4个元素A.B.C.D,权重分别为1.2.3.4,随机结果中A:B:C:D的 ...
王者荣耀鸿蒙抽奖,王者荣耀鸿运抽奖玩法攻略鸿运抽奖怎么玩
王者荣耀鸿运抽奖玩法攻略,鸿运抽奖怎么玩.王者荣耀4月23日上线了鸿运抽奖的玩法,许多小伙伴还不知道怎么玩,小编今天就来告诉大家鸿运抽奖怎么玩最合适,感兴趣的话就继续往下看吧. A.活动分为初级抽奖和 ...

转盘抽奖图片html,html转盘抽奖

转盘抽奖图片html,html转盘抽奖相关推荐

最新文章

热门文章