忽然想写一个对于抽奖的货色，借鉴了其余大佬的实现。做的一个概率类型的抽奖，css 跟数据都是瞎弄的。不想优化了。哈哈哈哈
<template>
<div class="home_page">
<!-- <headerPage />-->
<content-page>
<div> 抽奖测试 </div>
<div class="choujiang">
<ul class="ul">
<li
v-for="(item,i) in arr"
:key="i"
:class="{isActive:i === index}"
class="li"
> {{item}} </li>
</ul>
</div>
<!-- <div v-show="isShow" class="begin" @click="begin"> 开始抽奖 </div>-->
<!-- <div v-show="!isShow" class="begin" @click="stop"> 完结抽奖 </div>-->
<div v-show="isShow" class="begin" @click="startLottery"> 开始抽奖 </div>
</content-page>
</div>
</template>
<script>
// import headerPage from '../components/header_page'
import contentPage from '../components/content_page'
// import footerPage from '../components/footer_page'
export default {
name: 'Home',
components: {
// headerPage,
contentPage,
// footerPage,
},
data() {
return {arr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
isShow: true,
randomIndex: -1,
curIndex: 0,
// timer: '',
/** 批改版本 **/
index: -1, // 以后转动到哪个地位，终点地位
count: 10, // 总共有多少个地位
timer: 0, // 每次转动定时器
speed: 200, // 初始转动速度
times: 0, // 转动次数
cycle: 50, // 转动根本次数：即至多须要转动多少次再进入抽奖环节
prize: -1, // 中奖地位
click: true,
showToast: false, // 显示中奖弹窗
}
},
computed: {},
create() {},
mounted() {},
methods: {startLottery() {if (!this.click) {return}
this.startRoll()},
// 开始转动
startRoll() {
this.times += 1 // 转动次数
this.oneRoll() // 转动过程调用的每一次转动办法，这里是第一次调用初始化
// 如果以后转动次数达到要求 && 目前转到的地位是中奖地位
if (this.times > this.cycle && this.prize === this.index) {
this.$message({
type: 'success',
message: ` 中将号码: ${this.index}`,
})
// console.log('中奖了')
// console.log(this.index)
// console.log(this.prize)
// console.log(this.times)
// console.log(this.speed)
clearTimeout(this.timer) // 革除转动定时器，进行转动
this.prize = -1
this.times = 0
this.speed = 200
this.click = true
var that = this
setTimeout(() => {that.showToast = true}, 500)
} else {if (this.times < this.cycle) {this.speed -= 10 // 放慢转动速度} else if (this.times === this.cycle) {// const index = parseInt(Math.random() * 10, 0) || 0 // 随机取得一个中奖地位
this.prize = this.random() // 中奖地位, 可由后盾返回
if (this.prize > 9) {this.prize = 9}
} else if (this.times > this.cycle && ((this.prize === 0 && this.index === 9) || this.prize === this.index + 1)) {this.speed += 110} else {this.speed += 20}
if (this.speed < 40) {this.speed = 40}
this.timer = setTimeout(this.startRoll, this.speed)
}
},
// 每一次转动
oneRoll() {
let index = this.index // 以后转动到哪个地位
const count = this.count // 总共有多少个地位
index += 1
if (index > count - 1) {index = 0}
this.index = index
},
/** 生成概率的数据 **/
random() {const arr1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // 对应的奖品号码
const arr2 = [0.02, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.01, 0.07, 0.3] // 奖品号码的概率
let sum = 0
let factor = 0
let random = Math.random()
for (let i = arr2.length - 1; i >= 0; i--) {sum += arr2[i] // 统计概率总和
}
random *= sum // 生成概率随机数 (只是为了让定义的局部是个 let) 能够不写
for (let m = arr2.length - 1; m >= 0; m--) {factor += arr2[m]
if (random <= factor) {return arr1[m]
}
}
return null
},
},
}
</script>
<style scoped lang="scss">
@import "../assets/style/base.scss";
.home_page{font-size: pxTorem(16px);
display: flex;
align-items: center;
justify-content: center;
.choujiang{
.ul{width: pxTorem(240px);
display: flex;
flex-wrap: wrap;
.li{padding: pxTorem(8px) pxTorem(20px);
margin: pxTorem(10px) pxTorem(10px);
/*background-color: salmon;*/
border: 1px solid;
}
}
}
.begin{margin-top: pxTorem(40px);
padding: pxTorem(18px) pxTorem(24px);
background-color: salmon;
text-align: center;
cursor: pointer;
}
}
.isActive{background-color: salmon;}
</style>