最近在做一个大转盘抽奖获取金币及激励视频，刚开始要求前端自己根据后台返的每块概率去写逻辑，后来被驳回了，不过本次记录一下写的。
- html部分
`
//这里写是自己手写奖品，现做成了一个图片
今日剩余次数
{{100-detail.turntable_number}}次
- js部分、
` data () {
return {
detail:{
"turntable_number": 10, //己玩转盘次数,
probability:['10%','20%','30%','5%','5%','10%','5%','15%'],//扇区指标
"treasure_chest1": "0", //第一个宝箱 0无权开启 1有权开启 3己开启
"treasure_chest2": "1",
"treasure_chest3": "0",
"treasure_chest4": "1",
"treasure_chest5": "1",
},
hasTimes: true,
rotateAngle: 0, //将要旋转的角度
startRotatingDegree: 0, //初始旋转角度
rotateTransition: '',//控制过渡效果
totalNum: 100,
nowTimes: 0,
restaraunts: ['神秘宝箱', '50', '神秘宝箱', '60', '神秘宝箱', '70', '神秘宝箱', '90'],
prize: '',
nowIndex: 0
}`
- 方法部分
`random (rate) {
let random = Math.floor(Math.random() * 100); //随机数
console.log(random, '随机数')
let myRandom = [];
let randomList = [];
let randomParent = [];
for (let i = 0; i < 100; i++) {
myRandom.push(parseInt([i]) + 1);
}
for (let i = 0; i < rate.length; i++) {
let temp = [];
let start = 0;
let end = 0;
randomList.push(parseInt(rate[i].split('%')[0]));
for (let j = 0; j < randomList.length; j++) {
start += randomList[j - 1] || 0
end += randomList[j]
}
temp = myRandom.slice(start, end);
randomParent.push(temp)
}
console.log(randomParent)
for (let i = 0; i < randomParent.length; i++) {
if (randomParent[i].includes(random)) {
this.nowIndex = i + 1;
return (i + 1)
}
}
},
// 转动
rotateFun () {
if (!this.hasTimes) return;
let during_time = 5; // 默认为1s
let resultNum = this.random(this.detail.probability) //当前值
console.log(resultNum, 'resultNum')
// let random = Math.floor(Math.random() * 8);
let result_angle = 45; //最终会旋转到下标的位置所需要的度数
let rand_circle = 6; // 附加多转几圈，2-3
this.hasTimes = false; // 旋转结束前，不允许再次触发
// 转动盘子
this.prize = this.restaraunts[this.nowIndex];
console.log(this.prize, 'this.prize')
let rotate_angle = this.startRotatingDegree + rand_circle * 360 +
result_angle * resultNum -
this.startRotatingDegree % 360;
this.startRotatingDegree = rotate_angle;
this.rotateAngle = "rotate(" + rotate_angle + "deg)";
console.log(rotate_angle, 'this.rotateAngle')
var that = this;
// 旋转结束后，允许再次触发
setTimeout(function () {
that.gameOver();
}, during_time * 1000); // 延时，保证转盘转完
},
gameOver () {
// if (this.nowTimes < 5) {
this.hasTimes = true;
this.detail.turntable_number = this.detail.turntable_number + 1;
this.totalNum = 100 - this.detail.turntable_number;
times.$emit("clickTime", this.detail.turntable_number)
if (this.detail.turntable_number == 100) {
this.hasTimes = false;
}
console.log(this.nowTimes, this.totalNum)
}`