之前在公司一直写小程序,最近项目跟进,新加了抽奖转盘的H5页面,想了想,简单梳理一下逻辑,我用的是自己写的最简单的方式。
先看具体需求样式
作为一个资(c)深(v)工程师的我定睛一瞧,easy!!
一个大盒子里方9个小盒子,通过定义方法去给对每个盒子的样式添删一下就可以了。
至于跑马灯旋转的动画,将奖品列表在一个新的列表多复制几遍,生成一个包含有所有步骤的列表。
因为抽奖的当个奖项位置不会改变,一共有八个奖品盒子,通过setInterval去控制速度,每次让定义的索引变量加1去整除8,就能得到当前应该停留的盒子的key值。
没解释明白,看代码吧。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.bigBox{
width: 500px;
height: 500px;
background: red;
}
.nowrap{
display: flex;
flex-wrap: nowrap;
}
.allFlexAro{
display: flex;
justify-content: space-around;
}
.allFlexAro>div{
width: 150px;
height: 150px;
text-align: center;
line-height: 150px;
color: #fff;
margin-top: 15px;
}
.bgs{
background: #fff;
}
.bgb{
background: #000;
}
</style>
<title>Document</title>
</head>
<body>
<div class="bigBox" id="app">
<div class="nowrap allFlexAro">
<div :class='state%8==0?"bgs":"bgb"'>{{prizeList[0].name}}</div>
<div :class='state%8==1?"bgs":"bgb"'>{{prizeList[1].name}}</div>
<div :class='state%8==2?"bgs":"bgb"'>{{prizeList[2].name}}</div>
</div>
<div class="nowrap allFlexAro">
<div :class='state%8==7?"bgs":"bgb"'>{{prizeList[7].name}}</div>
<div @click='start(300)'>开始</div>
<div :class='state%8==3?"bgs":"bgb"'>{{prizeList[3].name}}</div>
</div>
<div class="nowrap allFlexAro">
<div :class='state%8==6?"bgs":"bgb"'>{{prizeList[6].name}}</div>
<div :class='state%8==5?"bgs":"bgb"'>{{prizeList[5].name}}</div>
<div :class='state%8==4?"bgs":"bgb"'>{{prizeList[4].name}}</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return{
prizeList:[
{key:1,name:'1',image:''},
{key:2,name:'2',image:''},
{key:3,name:'3',image:''},
{key:4,name:'4',image:''},
{key:5,name:'5',image:''},
{key:6,name:'6',image:''},
{key:7,name:'7',image:''},
{key:8,name:'8',image:''}
],
result:3,
showList:[],
state:0,
stateSteate:false
}
},
created(){
this.changeList()
},
methods:{
start(step){
if(!this.stateSteate){ //转动结束前,再次点击开始按钮无效
this.state = 0
this.stateSteate = true
let len = this.showList.length
let interv = setInterval(()=>{
if(this.state==len){
clearInterval(interv)
this.stateSteate = false
}else{
this.state += 1
}
},step)
}
},
changeList(){
let newList = []
let olist = JSON.parse(JSON.stringify(this.prizeList))
let nlist = []
this.prizeList.map((item,index)=>{
if(item.key == this.result){
nlist = olist.splice(0,index)
}
})
newList = [...this.prizeList,...this.prizeList,...nlist]// 先安排两圈
//这一步处理总共的步数
this.showList = newList
}
}
})
</script>
</body>
</html>
建议不要前端对奖项概率进行控制,但是如果你想,也可以做。
利用随机数
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.bigBox{
width: 500px;
height: 500px;
background: red;
}
.nowrap{
display: flex;
flex-wrap: nowrap;
}
.allFlexAro{
display: flex;
justify-content: space-around;
}
.allFlexAro>div{
width: 150px;
height: 150px;
text-align: center;
line-height: 150px;
color: #fff;
margin-top: 15px;
}
.bgs{
background: #fff;
}
.bgb{
background: #000;
}
</style>
<title>Document</title>
</head>
<body>
<div class="bigBox" id="app">
<div class="nowrap allFlexAro">
<div :class='state%8==0?"bgs":"bgb"'>{{prizeList[0].name}}</div>
<div :class='state%8==1?"bgs":"bgb"'>{{prizeList[1].name}}</div>
<div :class='state%8==2?"bgs":"bgb"'>{{prizeList[2].name}}</div>
</div>
<div class="nowrap allFlexAro">
<div :class='state%8==7?"bgs":"bgb"'>{{prizeList[7].name}}</div>
<div @click='start(300)'>开始</div>
<div :class='state%8==3?"bgs":"bgb"'>{{prizeList[3].name}}</div>
</div>
<div class="nowrap allFlexAro">
<div :class='state%8==6?"bgs":"bgb"'>{{prizeList[6].name}}</div>
<div :class='state%8==5?"bgs":"bgb"'>{{prizeList[5].name}}</div>
<div :class='state%8==4?"bgs":"bgb"'>{{prizeList[4].name}}</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return{
prizeList:[
{key:1,name:'1',image:''},
{key:2,name:'2',image:''},
{key:3,name:'3',image:''},
{key:4,name:'4',image:''},
{key:5,name:'5',image:''},
{key:6,name:'6',image:''},
{key:7,name:'7',image:''},
{key:8,name:'8',image:''}
],
result:3,
showList:[],
state:0,
stateSteate:false
}
},
created(){
this.getResult()
},
methods:{
/**
* 获取最终结果
* 抽取随机数,概率可通过数据位数决定
* */
getResult(){
let num = Math.floor(Math.random()*(10000 - 1) + 1);
if(num==1){
this.result = 1
}else if(num>1 && num<5){
this.result = 2
}else if(num>=5 && num<30){
this.result = 3
}else if(num>=30 && num<80){
this.result = 4
}else if(num>=80 && num<150){
this.result = 5
}else if(num>=150 && num<300){
this.result = 6
}else if(num>=300 && num<1000){
this.result = 7
}else if(num>=1000 && num<10000){
this.result = 8
}
//也可以设置某些奖项为不可能获得,当然,不建议前端对概率进行判断,数据蓉易被篡改
this.changeList()
},
start(step){
if(!this.stateSteate){ //转动结束前,再次点击开始按钮无效
this.state = 0
this.stateSteate = true
let len = this.showList.length
let interv = setInterval(()=>{
if(this.state==len){
//最终转动结束,你可以在此进行弹窗提示或者其他操作
clearInterval(interv)
this.stateSteate = false
}else{
this.state += 1
}
},step)
}
},
changeList(){
let newList = []
let olist = JSON.parse(JSON.stringify(this.prizeList))
let nlist = []
this.prizeList.map((item,index)=>{
if(item.key == this.result){
nlist = olist.splice(0,index)
}
})
newList = [...this.prizeList,...this.prizeList,...nlist]// 先安排两圈
//这一步处理总共的步数
this.showList = newList
}
}
})
</script>
</body>
</html>
如果对您有帮助,请不要吝啬您的点赞!谢谢