h5九宫格抽奖

最新推荐文章于 2024-07-10 17:15:46 发布

羽筠

最新推荐文章于 2024-07-10 17:15:46 发布

阅读量1.4k

点赞数 1

分类专栏： HTML5 HTML + CSS + JS vue.js

本文链接：https://blog.csdn.net/qq_16494241/article/details/105367773

版权

HTML5 同时被 3 个专栏收录

52 篇文章 0 订阅

订阅专栏

HTML + CSS + JS

40 篇文章 2 订阅

订阅专栏

vue.js

13 篇文章 0 订阅

订阅专栏

九宫格抽奖-jquery：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>九宫格抽奖test</title>
<style type="text/css">
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"; font-size:24px; line-height:1.6; color:#000;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;touch-callout:none;
}
li{ list-style:none;}
i{ font-style:normal;}
img{ vertical-align:middle;}

[v-cloak]{ display: none;}

.prize_body{ width: 540px; height: 540px; margin:20px auto; padding: 31px 0 0 31px; background: url(test/cj_body_bg.png); background-size: 100% 100%; position: relative;}
.prize_body_light{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;
	-webkit-animation: fadeIn .4s both infinite;
			animation: fadeIn .4s both infinite;
}
@-webkit-keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}
@keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}

.prize_body ul{ width: 478px; height: 478px; position: relative;}
.prize_body li{ width: 152px; height: 152px; line-height: 38px; text-align: center; color: #874ccf; font-size: 22px; border-radius:18px; position: absolute;
	display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center;
}
.prize_body li:not(.prize_li_btn){ background-color: #fff;}
/* .prize_li_1 , .prize_li_3 , .prize_li_5 , .prize_li_7{ color: #565656; background-color: #fff;}
.prize_li_2 , .prize_li_4 , .prize_li_6 , .prize_li_8{ color: #fff; background-color: #11a8d1;} */
.prize_body li.curr{ color: #fff; background-color: #ff7c92;}
.prize_li_1 , .prize_li_2 , .prize_li_3{ top: 0;}
.prize_li_4 , .prize_li_8{ top: 50%;
			-webkit-transform:translateY(-50%);
					transform:translateY(-50%);
}
.prize_li_5 , .prize_li_6 , .prize_li_7{ bottom: 0;}
.prize_li_1 , .prize_li_7 , .prize_li_8{ left: 0;}
.prize_li_2 , .prize_li_6{  left: 50%;
			-webkit-transform:translateX(-50%);
					transform:translateX(-50%);
}
.prize_li_3 , .prize_li_4 , .prize_li_5{ right: 0;}
.prize_body li:not(.prize_li_btn) img{ width: 116px; height: 83px; object-fit: contain;}

.prize_li_btn{ left: 50%; top: 50%; padding-top: 5px;
			-webkit-transform:translate(-50%,-50%);
					transform:translate(-50%,-50%);
}
.prize_li_btn img{ width: 100%; height: 100%;}
</style>
</head>

<body>


<section>
	<div class="prize_body">
		<img class="prize_body_light" src="test/cj_body_light.png" >
		<ul>
			<li class="prize_li_1">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>积分</p>
			</li>
			<li class="prize_li_2">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>实物</p>
			</li>
			<li class="prize_li_3">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>积分</p>
			</li>
			<li class="prize_li_4">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>谢谢参与</p>
			</li>
			<li class="prize_li_5">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>积分</p>
				
			</li>
			<li class="prize_li_6">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>实物</p>
			</li>
			<li class="prize_li_7">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>实物</p>
			</li>
			<li class="prize_li_8">
				<p><img src="https://www.baidu.com/img/bd_logo1.png" ></p>
				<p>谢谢参与</p>
			</li>
			<li class="prize_li_btn"><img src="test/cj_btn.png" /></li>
		</ul>
	</div>
</section>



<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script type="text/javascript">
window.onload = function(){
	
	//抽奖结果类别
	var getType = null; //1.积分。2.实物
	var getHasPrize = null; //是否中奖品
	
	
	
	
	///
	
	//初始化抽奖所有相关参数
	function Initialize(){
		startKey = 1;
		afterKye = null;
		flag = null;
		timeOutNum = 100;
		timer = null;
		
		ifChou = null;
	}

	//奖品滚动切换
	var startKey = 1; //展示的奖品切换的 起始 KEY
	var afterKye = null; //最终 抽到的奖品的 KEY
	var flag = null; //为true时,startKey == afterKye停止奖品切换
	var timeOutNum = 100; //抽奖时的切换时间(先快，获取到抽奖结果后再慢，然后再停止)
	var timer = null;
	function prizeChoose(){
		startKey = startKey > 8 ? 1 : startKey ;
		// console.log(startKey);
		
		$('.prize_li_' + startKey).addClass('curr').siblings().removeClass('curr');
		if(startKey == afterKye && flag){
			clearTimeout(timer);
			
			setTimeout(function(){
				if(getHasPrize){
					// 中奖
					if(getType == 1){
						// 积分
					}
					if(getType == 2){
						// 实物
					}
				}else{
					// 未中奖
				}
				alert('结束');
			},800)
			
			Initialize();
		}
		startKey++;
	}
	
	//抽奖
	var ifChou = null;
	$('.prize_li_btn').on('click',function(){
		if(ifChou){
			return;
		}else{
			ifChou = true;
		}
		
		var sendData = {
			ticket : null,
			randstr : null,
		}
		
		var captcha1 = new TencentCaptcha('2601855520860', function (res) {
			//console.log(res);
			if (res.ret == 0) {
				sendData.ticket = res.ticket;
				sendData.randstr = res.randstr;
				
				// loadingToast('请稍候...');
				
				/*test*/
				var data = {
					status:1,
					key:4, //后端返回：1至8的值
					//haveNubmer:9999, //次数
					hasPrize:true, //是否中奖品
					prizeName:'奖品名称', //奖品名称
					type:2, //1.积分。2.实物
					info:'提示信息',
				}
				/*test*/
				
				// getAjax('获得抽奖结果' , 'get' , sendData , function(data){
					if(data.status == 1){
						//抽奖成功
						timer = setInterval(prizeChoose,timeOutNum);
						
						//$('#haveNubmer').html(data.haveNubmer);
						
						getHasPrize = data.hasPrize; //是否中奖品
						if(getHasPrize){
							getType = data.type; //1.积分。2.实物
						}
						
						afterKye = data.key;
						setTimeout(function(){
							clearTimeout(timer);
							timeOutNum = 300;
							timer = setInterval(prizeChoose,timeOutNum);
							setTimeout(function(){
								flag = true;
							},2000)
						},1500)
					}else{
						dialog('温馨提示',data.info);
						Initialize();
					}
					// $('#loadingToast').fadeOut('fast');
				// })
				
			} else if (res.ret == 2) {
				//点击关闭按钮
				ifChou = null;
			}
		});
		captcha1.show();
	});
}
</script>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

</body>
</html>

九宫格抽奖-vue.js：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>九宫格抽奖test</title>
<style type="text/css">
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"; font-size:24px; line-height:1.6; color:#000;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;touch-callout:none;
}
li{ list-style:none;}
i{ font-style:normal;}
img{ vertical-align:middle;}
 
[v-cloak]{ display: none;}
 
.prize_body{ width: 540px; height: 540px; margin:20px auto; padding: 31px 0 0 31px; background: url(test/cj_body_bg.png); background-size: 100% 100%; position: relative;}
.prize_body_light{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;
	-webkit-animation: fadeIn .4s both infinite;
			animation: fadeIn .4s both infinite;
}
@-webkit-keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}
@keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}
 
.prize_body ul{ width: 478px; height: 478px; position: relative;}
.prize_body li{ width: 152px; height: 152px; line-height: 38px; text-align: center; color: #874ccf; font-size: 22px; border-radius:18px; position: absolute;
	display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center;
}
.prize_body li:not(.prize_li_btn){ background-color: #fff;}
/* .prize_li_1 , .prize_li_3 , .prize_li_5 , .prize_li_7{ color: #565656; background-color: #fff;}
.prize_li_2 , .prize_li_4 , .prize_li_6 , .prize_li_8{ color: #fff; background-color: #11a8d1;} */
.prize_body li.curr{ color: #fff; background-color: #ff7c92;}
.prize_li_1 , .prize_li_2 , .prize_li_3{ top: 0;}
.prize_li_4 , .prize_li_8{ top: 50%;
			-webkit-transform:translateY(-50%);
					transform:translateY(-50%);
}
.prize_li_5 , .prize_li_6 , .prize_li_7{ bottom: 0;}
.prize_li_1 , .prize_li_7 , .prize_li_8{ left: 0;}
.prize_li_2 , .prize_li_6{  left: 50%;
			-webkit-transform:translateX(-50%);
					transform:translateX(-50%);
}
.prize_li_3 , .prize_li_4 , .prize_li_5{ right: 0;}
.prize_body li:not(.prize_li_btn) img{ width: 116px; height: 83px; object-fit: contain;}
 
.prize_li_btn{ left: 50%; top: 50%; padding-top: 5px;
			-webkit-transform:translate(-50%,-50%);
					transform:translate(-50%,-50%);
}
.prize_li_btn img{ width: 100%; height: 100%;}
</style>
</head>
 
<body>
 
 
<section id="app" v-cloak>
	<div class="prize_body">
		<img class="prize_body_light" src="test/cj_body_light.png" >
		<ul>
			<li v-for="item in prizeList" :class="'prize_li_' + item.index + (item.index == startKey ? ' curr' : '')">
				<p><img :src="item.imgsrc" ></p>
				<p>{{item.prizeName}}</p>
			</li>
			<li @click="luckyDraw" class="prize_li_btn"><img src="test/cj_btn.png" /></li>
		</ul>
	</div>
</section>
 
 
 
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
	var VM = new Vue({
		el:"#app",
		data:{
			// 页面中奖品信息
			prizeList:[],
			
			ifChou : null, //是否正在抽奖中
			
			//抽奖结果类别
			getType : null, //1.积分。2.实物
			getHasPrize : null, //是否中奖品
			
			//奖品滚动切换所需参数
			startKey : 0, //展示的奖品切换的 起始 KEY
			afterKye : null, //最终 抽到的奖品的 KEY
			flag : null, //为true时,startKey == afterKye停止奖品切换
			timeOutNum : 100, //抽奖时的切换时间(先快，获取到抽奖结果后再慢，然后再停止)
			timer : null,
		},
		created() {
			
		},
		mounted() {
			this.getPrizeList();
		},
		watch() {
		},
		methods:{
			//获取页面中奖品信息
			getPrizeList(){
				// loadingToast('加载中...');
				
				/*test*/
				var data = {
					status:1,
					list:[
						{id:'001',index:1,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'积分'},
						{id:'002',index:2,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'实物'},
						{id:'003',index:3,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'积分'},
						{id:'004',index:4,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'谢谢参与'},
						{id:'005',index:5,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'积分'},
						{id:'006',index:6,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'实物'},
						{id:'007',index:7,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'实物'},
						{id:'008',index:8,imgsrc:'https://www.baidu.com/img/bd_logo1.png',prizeName:'谢谢参与'},
					],
					info:'提示信息',
				}
				/*test*/
				
				// getAjax('获得页面中奖品信息' , 'get' , {} , (data) => {
					if(data.status == 1){
						this.prizeList = data.list;
					}else{
						dialog('温馨提示',data.info);
					}
					// $('#loadingToast').fadeOut('fast');
				// })
			},
			
			//初始化抽奖所有相关参数
			Initialize(){
				this.startKey = 0;
				this.afterKye = null;
				this.flag = null;
				this.timeOutNum = 100;
				this.timer = null;
				
				// this.ifChou = null;
			},
			
			//奖品滚动切换
			prizeChoose(){
				this.startKey++;
				
				this.startKey = this.startKey > 8 ? 1 : this.startKey ;
				// console.log(this.startKey);
				
				if(this.startKey == this.afterKye && this.flag){
					clearTimeout(this.timer);
					// console.log(this.startKey);
					
					setTimeout(() => {
						if(this.getHasPrize){
							// 中奖
							if(this.getType == 1){
								// 积分
							}
							if(this.getType == 2){
								// 实物
							}
						}else{
							// 未中奖
						}
						this.ifChou = null;
						alert('结束');
					},800)
					
					return;
				}
			},
			
			//抽奖
			luckyDraw(){
				if(this.ifChou){
					return;
				}else{
					this.ifChou = true;
				}
				
				var sendData = {
					ticket : null,
					randstr : null,
				}
				
				var captcha1 = new TencentCaptcha('2601855520860', (res) => {
					//console.log(res);
					if (res.ret == 0) {
						sendData.ticket = res.ticket;
						sendData.randstr = res.randstr;
				
						//初始化抽奖所有相关参数
						this.Initialize();
						
						// loadingToast('请稍候...');
						
						/*test*/
						var data = {
							status:1,
							key:4, //后端返回：1至8的值
							//haveNubmer:9999, //次数
							hasPrize:true, //是否中奖品
							prizeName:'奖品名称', //奖品名称
							type:2, //1.积分。2.实物
							info:'提示信息',
						}
						/*test*/
						
						// getAjax('获得抽奖结果' , 'get' , sendData , (data) => {
							if(data.status == 1){
								//抽奖成功
								this.timer = setInterval(this.prizeChoose,this.timeOutNum);
								
								//$('#haveNubmer').html(data.haveNubmer);
								
								this.getHasPrize = data.hasPrize; //是否中奖品
								if(this.getHasPrize){
									this.getType = data.type; //1.积分。2.实物
								}
								
								this.afterKye = data.key;
								setTimeout(() => {
									clearTimeout(this.timer);
									this.timeOutNum = 300;
									this.timer = setInterval(this.prizeChoose,this.timeOutNum);
									setTimeout(() => {
										this.flag = true;
									},2000)
								},1500)
							}else{
								dialog('温馨提示',data.info);
								this.Initialize();
							}
							// $('#loadingToast').fadeOut('fast');
						// })
						
					} else if (res.ret == 2) {
						//点击关闭按钮
						this.ifChou = null;
					}
				});
				captcha1.show();
			},
		}
	})
</script>
</body>
</html>

资源：

羽筠

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
h5九宫格抽奖

九宫格抽奖-jquery：<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="wid...
复制链接

扫一扫

专栏目录