忽然想写一个对于抽奖的货色，借鉴了其余大佬的实现。做的一个概率类型的抽奖，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>