html 九宫格抽奖的效果demo

在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta name="format-detection" content="telephone=no" />
		<meta content="width=device-width,initial-scale=0.6,minimum-scale=0.6,maximum-scale=0.6,user-scalable=no"
			name="viewport" />
		<meta content="yes" name="full-screen" />
		<meta content="true" name="x5-fullscreen" />
		<meta content="application" name="browsermode" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>抽奖</title>
		<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

		<style>
			/* 效果CSS开始 */
			body {
    
    
				width: 100%;
				height: 1360px;
				padding: 0px;
				margin: 0px
			}

			#title img {
    
    
				height: 100px;
				padding-top: 20px;
				margin-bottom: 10px
			}

			#lottery {
    
    
				width: 584px;
				margin: 0px auto;
			}

			#lottery table td {
    
    
				width: 142px;
				height: 142px;
				text-align: center;
				vertical-align: middle;
				font-size: 24px;
				color: #333;
				font-index: -999
			}

			#lottery table td a {
    
    
				width: 284px;
				height: 284px;
				line-height: 284px;
				display: block;
				text-decoration: none;
				border-radius: 200px;
				color: #fff;
				border-radius: 20px;
				font-size: 40px;
				background: #ff9900;
			}

			#lottery table td.active {
    
    
				background-color: #ea0000;
			}

			/* 效果CSS结束 */
		</style>
		<script type="text/javascript" charset="utf-8">
			var lottery = {
    
    
				index: -1, //当前转动到哪个位置，起点位置
				count: 0, //总共有多少个位置
				timer: 0, //setTimeout的ID，用clearTimeout清除
				speed: 20, //初始转动速度
				times: 0, //转动次数
				cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
				prize: -1, //中奖位置
				init: function(id) {
    
    
					if ($("#" + id).find(".lottery-unit").length > 0) {
    
    
						$lottery = $("#" + id);
						$units = $lottery.find(".lottery-unit");
						this.obj = $lottery;
						this.count = $units.length;
						$lottery.find(".lottery-unit-" + this.index).addClass("active");
					};
				},
				roll: function() {
    
    
					var index = this.index;
					var count = this.count;
					var lottery = this.obj;
					$(lottery).find(".lottery-unit-" + index).removeClass("active");

					//将所有图片设置透明一点
					$(lottery).find(".lottery-unit-" + index).css('opacity', '0.5');

					index += 1;
					if (index > count - 1) {
    
    
						index = 0;
					};
					$(lottery).find(".lottery-unit-" + index).addClass("active");
					//设置成正常
					$(lottery).find(".lottery-unit-" + index).css('opacity', '1');
					this.index = index;
					return false;
				},
				stop: function(index) {
    
    
					this.prize = index;
					return false;
				}
			};

			function roll() {
    
    
				lottery.times += 1;
				lottery.roll();
				if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
    
    
					clearTimeout(lottery.timer);
					lottery.prize = -1;
					lottery.times = 0;
					click = false;
				} else {
    
    
					if (lottery.times < lottery.cycle) {
    
    
						lottery.speed -= 10;
					} else if (lottery.times == lottery.cycle) {
    
    
						var index = Math.random() * (lottery.count) | 0;
						//最终位置 也就是中奖位置，写上ajax ， -1 到11随你写
						console.log('^^最终位置^^^^^' + index);
						lottery.prize = index;
					} else {
    
    
						if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize ==
								lottery.index + 1)) {
    
    
							lottery.speed += 110;
						} else {
    
    
							lottery.speed += 20;
						}
					}
					if (lottery.speed < 40) {
    
    
						lottery.speed = 40;
					};
					//console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
					lottery.timer = setTimeout(roll, lottery.speed);
				}
				return false;
			}

			var click = false;

			window.onload = function() {
    
    
				lottery.init('lottery');
				$("#lottery a").click(function() {
    
    
					if (click) {
    
    
						return false;
					} else {
    
    

						lottery.speed = 100;
						roll();
						click = true;
						return false;
					}
				});
			};
		</script>

	</head>
	<body>
		<!--效果html开始-->

		<div id="title">
			<img src="images/title.png">
		</div>
		<div id="lottery">
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td class="lottery-unit lottery-unit-0"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg"></td>
					<td class="lottery-unit lottery-unit-1"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg"></td>
					<td class="lottery-unit lottery-unit-2"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg"></td>
					<td class="lottery-unit lottery-unit-3"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg"></td>
				</tr>
				<tr>
					<td class="lottery-unit lottery-unit-11"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg">
					</td>
					<td colspan="2" rowspan="2"><a href="#">点击抽奖</a></td>
					<td class="lottery-unit lottery-unit-4"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg"></td>
				</tr>
				<tr>
					<td class="lottery-unit lottery-unit-10"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg">
					</td>
					<td class="lottery-unit lottery-unit-5"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg"></td>
				</tr>
				<tr>
					<td class="lottery-unit lottery-unit-9"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg"></td>
					<td class="lottery-unit lottery-unit-8"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg"></td>
					<td class="lottery-unit lottery-unit-7"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg"></td>
					<td class="lottery-unit lottery-unit-6"><img src="http://img.touxiangwu.com/2020/3/uq6Bja.jpg"></td>
				</tr>
			</table>
		</div>
	</body>
</html>
html 九宫格抽奖的效果demo

猜你喜欢
