html+js抽奖转盘解析(简单)

最新推荐文章于 2024-05-08 15:40:33 发布

Your-Nikee

最新推荐文章于 2024-05-08 15:40:33 发布

阅读量1.6k

点赞数 9

分类专栏： js 文章标签： html js es6 html5

本文链接：https://blog.csdn.net/YourNikee/article/details/105493661

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

之前在公司一直写小程序，最近项目跟进，新加了抽奖转盘的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>

如果对您有帮助，请不要吝啬您的点赞！谢谢

Your-Nikee

关注

9
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
html+js抽奖转盘解析(简单)

之前在公司一直写小程序，最近项目跟进，新加了抽奖转盘的H5页面，想了想，简单梳理一下逻辑，我用的是自己写的最简单的方式。先看具体需求样式作为一个资（c）深（v）工程师的我定睛一瞧，easy！！一个大盒子里方9个小盒子，通过定义方法去给对每个盒子的样式添删一下就可以了。为了使用变量的方便，当时引入Vue。先画了这样一个html结构...
复制链接

扫一扫