jquery实现抽奖

最新推荐文章于 2022-10-25 18:50:22 发布

maxiaoxin1314

最新推荐文章于 2022-10-25 18:50:22 发布

阅读量642

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/maxiaoxin1314/article/details/104506657

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#lottery {
				width: 570px;
				height: 510px;
				margin: 0px auto;
				border: 4px solid #ba1809;
			}

			#lottery table {
				background-color: yellow;
			}

			#lottery table td {
				position: relative;
				width: 190px;
				height: 170px;
				text-align: center;
				color: #333;
				font-index: -999
			}

			#lottery table td img {
				display: block;
				width: 190px;
				height: 170px;
			}

			#lottery table td a {
				width: 190px;
				height: 170px;
				display: block;
				text-decoration: none;
				background: url(img/9.jpg) no-repeat top center;
			}

			#lottery table td a:hover {
				background-image: url(img/11.jpg);
			}

			#lottery table td.active .mask {
				display: block;
			}

			.mask {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background-color: rgba(252, 211, 4, 0.5);
				display: none;
			}
		</style>

	</head>
	<body>

		<div id="lottery">
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td class="lottery-unit lottery-unit-0">
						<img src="img/1.jpg">
						<div class="mask"></div>
					</td>
					<td class="lottery-unit lottery-unit-1">
						<img src="img/2.jpg">
						<div class="mask"></div>
					</td>
					<td class="lottery-unit lottery-unit-2">
						<img src="img/3.jpg">
						<div class="mask"></div>
					</td>
				</tr>
				<tr>
					<td class="lottery-unit lottery-unit-7">
						<img src="img/4.jpg">
						<div class="mask"></div>
					</td>
					<!-- 点击触发抽奖 -->
					<td><a href="#"></a></td>
					<td class="lottery-unit lottery-unit-3">
						<img src="img/5.jpg">
						<div class="mask"></div>
					</td>
				</tr>
				<tr>
					<td class="lottery-unit lottery-unit-6">
						<img src="img/6.jpg">
						<div class="mask"></div>
					</td>
					<td class="lottery-unit lottery-unit-5">
						<img src="img/7.jpg">
						<div class="mask"></div>
					</td>
					<td class="lottery-unit lottery-unit-4">
						<img src="img/8.jpg">
						<div class="mask"></div>
					</td>
				</tr>
			</table>
		</div>
	
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		var lot = $(".lottery-unit");
		var nowIndex = -1; //记录添加激活类的下标
		var btn = $("table").find("a")
		console.log(btn)
		var curIndex = null; //记录上一次坐标
		var round = 0; //记录移动几圈
		var n = 0; //记录移动了多少次
		var timer = null; //旋转计时器
		var priceIndex = (Math.random()*lot.length) | 0; //中奖的下标
		console.log(priceIndex)
		var isClick = true;
		function move(){
			n++;
			nowIndex++;
			if(n%8==0){
				round++;
				console.log("跑了"+round+"圈");
				if(round>=3){
					clearInterval(timer);
					timer = setInterval(move,50)
				}
				if(round > 8){
					clearInterval(timer);
					timer = setInterval(move,1000)
				}
			}
			// 第二种方式
			// if(n>=8 && n<12){
			// 	clearInterval(timer)
			// 	timer = setInterval(move,50)
			// }
			// if(n>=12){
			// 	clearInterval(timer)
			// 	timer = setInterval(move,50)
			// }
			
			lot.filter(".lottery-unit-"+nowIndex).addClass("active")
			// 当curIndex为0时，布尔值为false，所以要加curIndex==0
			if(curIndex || curIndex==0){
				lot.filter(".lottery-unit-"+curIndex).removeClass("active")
			}
			curIndex = nowIndex;
			
			// 如何实现中奖
			if(nowIndex == priceIndex && round > 8){
				
				clearInterval(timer);
				if(priceIndex==1){
					setTimeout(function(){
						alert("111111")
					},1000)
				}
				// 重置参数
				isClick = true;
				round = 0;
				nowIndex = -1;
				curIndex = null;
				priceIndex = (Math.random()*lot.length) | 0;
				console.log("中奖的下标",priceIndex)
				
			}
			if(nowIndex>=lot.length-1){
				nowIndex=-1;
			}
		}
		
		btn.click(function(){
			if(isClick){
				console.log("开始抽奖");
				isClick = false;
				timer = setInterval(move,100);
			}
		})
	</script>
	</body>
</html>

maxiaoxin1314

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
jquery实现抽奖

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #lottery { width: 570px; height: 510px; ma...
复制链接

扫一扫

专栏目录