自定义顺序/九宫格抽奖

效果

在这里插入图片描述

唠叨

  • 用一个数组决定外发光边框停留的顺序
  • 取一个随机数,加上之前定好的圈数*盲盒个数,确认最后的奖品是哪个(随机数可后端返回)
  • 根据变换定时的时间,改变每一圈运动的速度
  • 注意:排序的数组和最后奖品间的关系,在下面script标签里的positionId后面有解释

代码

抽奖逻辑是之前网上找的,有一些更改,时间有点久,忘了在哪找到的了

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
	<title>九宫格抽奖</title>
	<script>
			(function() {
				var _width = 750;
				var ua = navigator.userAgent;
				if (/Android (\d+\.\d+)/.test(ua)) {
					var version = parseFloat(RegExp.$1);
					if (version > 2.3) {
						document.write('<meta name="viewport" content="width=' + _width +
							',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
					} else {
						document.write('<meta name="viewport" content="width=' + _width +
							',target-densitydpi=device-dpi">')
					}
				} else if (/QQAC_Client_iOS/.test(ua)) {
					document.write('<meta name="viewport" content="width=' + _width +
						',maximum-scale=0.5,minimum-scale=0.5">');
				} else {
					document.write('<meta name="viewport" content="width=' + _width +
						',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
				}
			})();
		</script>
	<style>
		.mod_center {
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
		}

		.Pplay_box {
			position: absolute;
			left: 0;
			top: 11px;
			width: 750px;
			height: 1195px;
			box-shadow: inset 0 0 10px 10px rgba(255, 0, 0, .4),
						0px 9px 6px 2px rgb(191, 101, 101, .4);
		}
		.Pplay_box_main {
			position: absolute;
			left: 66px;
			top: 290px;
			width: 428px;
			height: 734px;
			border: 1px solid red;
			box-shadow: inset 0 0 10px 10px rgba(255, 0, 0, .4);
		}

		.Pplay_box_main_box {
			position: absolute;
			left: 26px;
			top: 36px;
			width: 373px;
			height: 621px;
			border: 1px solid red;
			box-shadow: 0px 9px 6px 2px rgb(191, 101, 101, .4);
		}

		.Pplay_box_title {
			top: 110px;
			width: 624px;
			height: 114px;
			font-family: 'syh';
			font-size: 64px;
		}

		.Pplay_box_title_txt {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			text-align: center;
		}

		.Pplay_box_title_txt1 {
			color: #fec4a0;
			opacity: .3;
			text-shadow: 0 0 20px #fff3d5;
		}

		.Pplay_box_title_txt2 {
			color: #fff;
			text-shadow: 0 0 20px #fff3d5;
		}

		.Pplay_box_title_txt3 {
			color: #fe3900;
			text-shadow: 0 0 20px #f00,
				0 0 6px #f61a00,
				0 0 16px #650606;
		}


		/* 九个盲盒的位置 */
		.pbmb_item {
			position: absolute;
			width: 110px;
			height: 110px;
			background-size: 100px 99px;
			box-shadow: inset 0 0 10px 10px rgba(255, 0, 0, .4);
		}

		.pbmb_item_col1 {
			left: 10px;
		}

		.pbmb_item_col2 {
			left: 133px;
		}

		.pbmb_item_col3 {
			left: 254px;
		}

		.pbmb_item_row1 {
			top: 60px;
		}

		.pbmb_item_row2 {
			top: 262px;
		}

		.pbmb_item_row3 {
			top: 456px;
		}

		.pbmb_item_light {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			border-radius: 20px;
			box-shadow: inset 0 0 20px 10px #FF576D,
				inset 0 0 10px 6px #fff;
		}

		.Pplay_box_main_glass {
			position: absolute;
			left: -12px;
			top: 22px;
			width: 495px;
			height: 694px;
		}

		.Pplay_box_main_drop {
			position: absolute;
			left: 488px;
			top: 616px;
			width: 100px;
			height: 99px;
		}

		.Pplay_box_main_number {
			position: absolute;
			left: 486px;
			top: 50px;
			width: 124px;
			height: 238px;
			text-align: center;
		}

		.Pplay_box_main_number span {
			display: block;
		    width: 24px;
		    margin: 0 auto;
		    height: auto;
		    font-size: 24px;
		    line-height: 24px;
		    text-align: center;
		}

		#pbmn_number {
			width: 124px;
			font-size: 42px;
			line-height: 50px;
			color: #f6a14c;
		}

		.Pplay_box_playNow {
			position: absolute;
			left: 504px;
			top: 460px;
			width: 104px;
			height: 104px;
			background: pink;
			box-shadow: 4px 6px 6px 2px rgb(191, 101, 101, .4);
			line-height: 96px;
			text-align: center;
			font-size: 40px;
			font-weight: bold;
			color: #fff;
			text-shadow: 1px 2px 6px red;
		}

	</style>
</head>
<body>
	<div class="Pplay_box">
		<div class="mod_center Pplay_box_title">
			<div class="Pplay_box_title_txt Pplay_box_title_txt3 shine">盲盒抽奖</div>
			<div class="Pplay_box_title_txt Pplay_box_title_txt2">盲盒抽奖</div>
			<div class="Pplay_box_title_txt Pplay_box_title_txt1">盲盒抽奖</div>
		</div>
		<div class="Pplay_box_main">
			<div class="Pplay_box_main_box">
				<div class="pbmb_item pbmb_item1 pbmb_item_row1 pbmb_item_col1">
					<div class="pbmb_item_light" style="display:none;"></div>
				</div>
				<div class="pbmb_item pbmb_item2 pbmb_item_row1 pbmb_item_col2">
					<div class="pbmb_item_light" style="display:none;"></div>
				</div>
				<div class="pbmb_item pbmb_item3 pbmb_item_row1 pbmb_item_col3">
					<div class="pbmb_item_light" style="display:none;"></div>
				</div>
				<div class="pbmb_item pbmb_item4 pbmb_item_row2 pbmb_item_col1">
					<div class="pbmb_item_light" style="display:none;"></div>
				</div>
				<div class="pbmb_item pbmb_item5 pbmb_item_row2 pbmb_item_col2">
					<div class="pbmb_item_light" style="display:none;"></div>
				</div>
				<div class="pbmb_item pbmb_item6 pbmb_item_row2 pbmb_item_col3">
					<div class="pbmb_item_light" style="display:none;"></div>
				</div>
				<div class="pbmb_item pbmb_item7 pbmb_item_row3 pbmb_item_col1">
					<div class="pbmb_item_light" style="display:none;"></div>
				</div>
				<div class="pbmb_item pbmb_item8 pbmb_item_row3 pbmb_item_col2">
					<div class="pbmb_item_light" style="display:none;"></div>
				</div>
				<div class="pbmb_item pbmb_item9 pbmb_item_row3 pbmb_item_col3">
					<div class="pbmb_item_light" style="display:none;"></div>
				</div>
			</div>
			<!-- /盲盒的九个盒子 -->

			<div class="Pplay_box_playNow"></div>
			
			<div class="Pplay_box_main_number">
				<span>您还有</span>
				<span class="pbmn_number" id="pbmn_number">100</span>
				<span>次机会</span>
			</div>
			
		</div>
	</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	/* 
	 * 盲盒游戏页,抽奖
	 */
	let item = $('.pbmb_item'),
		timer = null,
		bReady = true, //定义一个抽奖开关
		prize = [0, 1, 2, 3, 4, 5, 6, 7, 8], //奖品标签滚动的顺序,可随意定义,需要注意的是最后奖品的排序和这个顺序是一致的,比如排序为【0,1,2,5,4,3,6,7,8】,positionId为4时抽中的是数组里第四位数,即下标为5的盲盒
		positionId = 0, //positionId用来存放得到的随机数,也就是抽中的奖品,一般由后端返回,在这里先随机一个
		game_count; //剩余游戏次数,一开始由ajax获取,在每天分享后有一次增加的机会

	$('.Pplay_box_playNow').on('click', function() {
		game_count = $('#pbmn_number').text();
		if (bReady) {
			if (game_count > 0) {
				$(this).css({
					'left': '508px',
					'top': '466px',
					'boxShadow':'inset 0 0 6px 2px rgb(191, 101, 101, 0.4)'
				}); //按钮按下效果
				bReady = false;

				$('#pbmn_number').text($('#pbmn_number').text() - 1); //次数-1
				game_count -= 1;
				
				positionId = getrandomnum(1, 10);
				startinit(positionId); //执行抽奖初始化
			} else if (game_count == 0) {
				console.log('次数没了');
			}

		}
	})


	//随机数
	function getrandomnum(n, m) {
		return parseInt((m - n) * Math.random() + n);
	}


	//抽奖初始化
	function startinit(positionId) {
		let i = 0, //定义一个i 用来计算抽奖跑动的总次数
		 	t = 50, //抽奖跑动的速度 初始为50毫秒
		 	rounds = 2, //抽奖转动的圈数
		 	rNum = rounds * 9; //标记跑动的次数
		timer = setTimeout(startscroll, t); //每t毫秒执行startscroll函数

		//抽奖滚动的函数
		function startscroll() {

			//每次滚动抽奖将所有盲盒发光外框都隐藏
			$('.pbmb_item_light').hide();

			var prizenum = prize[i % item.length]; //通过i余8得到此刻在prize数组中的数字,该数字就是外发光边框出现的位置
			$('.pbmb_item:nth(' + prizenum + ') .pbmb_item_light').show();
			i++;

			if (i < 9) { //第一圈
				timer = setTimeout(startscroll, t);
			} else if (i < rNum - 9) { //第二圈,速度慢点
				timer = setTimeout(startscroll, t*2);
			} else if (i >= rNum - 9 && i < rNum + positionId) {//第三圈,速度再慢
				t += (i - rNum + 9) * 5;
				timer = setTimeout(startscroll, t);
			}
			if (i >= rNum + positionId) { //计时器结束,结果出现
				
				console.log('抽中了' + positionId);

				$('.Pplay_box_playNow').css({
					'left': '504px',
					'top': '460px',
					'boxShadow':'4px 6px 6px 2px rgb(191, 101, 101, .4)'
				}); //按钮弹回可按的效果
				bReady = true; //当计时器结束后让按钮变为可抽奖状态
				clearTimeout(timer);
			}

		}
	}
</script>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值