用原生js实现的转盘抽奖和九宫格抽奖插件!
1、转盘抽奖----指针旋转
// 指针旋转,从右向左顺时针计算奖品
var luckArr = ['100减99优惠券','谢谢参与','59减15优惠券','谢谢参与','39减10优惠券','谢谢参与'];
var luck = new LuckDraw();
var startRotate = function(elem){
luck._init({
rotateId: '#luckPointer',
luckNumber: Math.floor(Math.random() * (5 - 0) + 0),
typeNumber: 6,
time: 2000,
type: 'turntable',
circleNumber: 10,
success: function(res){
console.log(res.luckNumber);
console.log(luckArr[res.luckNumber]);
alert(luckArr[res.luckNumber]);
}
});
}
2、转盘抽奖----转盘旋转
// 转盘旋转,从左向右逆时针计算奖品
var luckArr = ['100减99优惠券', '谢谢参与', '39减10优惠券', '谢谢参与', '59减15优惠券', '谢谢参与'];
var luck = new LuckDraw();
var startRotate = function (elem) {
luck._init({
rotateId: '#luckTurntable',
luckNumber: Math.floor(Math.random() * (5 - 0) + 0),
typeNumber: 6,
time: 2000,
type: 'turntable',
circleNumber: 10,
success: function (res) {
console.log(res.luckNumber);
console.log(luckArr[res.luckNumber]);
alert(luckArr[res.luckNumber]);
}
});
}
3、九宫格抽奖
var luckArr = ['10元红包', 'iPad Mini', '莫灰心', '20元话费', '20元话费', '莫灰心', '某视频网站会员一月', '88元红包'];
var luck = new LuckDraw();
var startRotate = function (elem) {
luck._init({
rotateId: '.rui-luck-prize',
activeClass: 'rui-active',
luckNumber: Math.floor(Math.random() * (7 - 0) + 0),
typeNumber: 8,
time: 3000,
type: 'prize',
circleNumber: 10,
success: function (res) {
console.log(res.luckNumber)
console.log(luckArr[res.luckNumber])
alert(luckArr[res.luckNumber])
}
});
}
4、参数说明
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|----|-----|-----|-----|-----|
| pointerId | String | 选填 | luckPointer | 指针对象id |
| turntableId | String | 选填 | luckTurntable | 转盘对象id |
| rotateId | String | 必填 | luckTurntable | 旋转对象id |
| activeClass | String | 九宫格抽奖必填 | rui-active | 九宫格抽奖选中是的效果 |
| type | String | 必填 | turntable | 选择是九宫格抽奖还是转盘抽奖(turntable:转盘抽奖;prize:九宫格抽奖) |
| time | Number | 选填 | 2000 | 抽奖动作的时间 |
| luckNumber | Number | 必填 | 4 | 中奖位置 |
| typeNumber | Number | 必填 | 6 | 共有多少个中奖位置 |
| circleNumber | Number | 必填 | 10 | 轮回圈数后中奖 |
| success | Funtion | 选填 | function(){} | 抽中后返回的成功函数 |