js：九宫格抽奖

最新推荐文章于 2024-01-27 09:44:29 发布

mkmin

最新推荐文章于 2024-01-27 09:44:29 发布

阅读量4.7k

点赞数 6

分类专栏： javascript javascript 文章标签：九宫格抽奖 javascript 前端 dom

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/78606250

版权

javascript 同时被 2 个专栏收录

51 篇文章 1 订阅

订阅专栏

javascript

44 篇文章 2 订阅

订阅专栏

项目需要实现一个九宫格抽奖的模板，当然是微信小程序版本的，但是现在有点时间，就整理了个js版本的（兼容性，使用jq的dom操作）

当然，不喜欢用jq的同学可以直接使用document来操作，如果不喜欢dom操作的，就移步下一篇博客的微信小程序版本的

代码如下：

<!DOCTYPE html>
<html>
	<style>
		li {
			width: 200px;
			height: 200px;
		}
		
		.ul {
			width: 606px;
			height: 606px;
		}
		
		.ul li {
			float: left;
			border: 1px solid #000000;
			list-style: none;
			line-height: 200px;
			text-align: center;
			font-size: 50px;
		}
	</style>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="ul">
			<li class="li1">1</li>
			<li class="li2">2</li>
			<li class="li3">3</li>
			<li class="li8">8</li>
			<li class="listart">开始</li>
			<li class="li4">4</li>
			<li class="li7">7</li>
			<li class="li6">6</li>
			<li class="li5">5</li>
		</div>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script>
			var last_index = 0, //上一回滚动的位置
				amplification_index = 0, //轮盘的当前滚动位置,0表示为第一次
				roll_flag = true, //是否允许滚动
				max_number = 8, //轮盘的全部数量
				speed = 300, //速度，速度值越大，则越慢 初始化为300
				finalindex = 3, //最终的奖励
				myInterval = "", //定时器
				max_speed = 40, //滚盘的最大速度
				minturns = 8, //最小的圈数为2
				runs_now = 0; //当前已跑步数
			$(".listart").bind("click", function() {
				//初始化步数
				runs_now = 0;
				//当前可以点击的状态下
				if(roll_flag) {
					roll_flag = false;
					//启动滚盘，注，若是最终后台无返回就不好意思里
					rolling();
				}
			});

			//滚动轮盘的动画效果
			function rolling() {
				myInterval = setTimeout(function() {
					rolling();
				}, speed);
				runs_now++; //已经跑步数加一
				amplification_index++; //当前的加一
				//获取总步数，接口延迟问题，所以最后还是设置成1s以上
				var count_num = minturns * max_number + finalindex - last_index;
				console.log(count_num);
				//上升期间
				if(runs_now <= (count_num / 3) * 2) {
					speed -= 30; //加速
					if(speed <= max_speed) {
						speed = max_speed; //最高速度为40；
					}
				}
				//抽奖结束
				else if(runs_now >= count_num) {
					clearInterval(myInterval);
					last_index = amplification_index;
					roll_flag = true;

				}
				//下降期间
				else if(count_num - runs_now <= 10) {
					speed += 20;
				}
				//缓冲区间
				else {
					speed += 10;
					if(speed >= 100) {
						speed = 100; //最低速度为100；
					}
				}
				if(amplification_index > max_number) { //判定！是否大于最大数
					amplification_index = 1;
				}

				//刷新页面
				var strli = ".li";
				strli += amplification_index;
				//全部清除
				$("li").each(function() {
					$(this).css("background", "#ffffff");
				})
				//画颜色
				$(strli).css("background", "red");
			}
		</script>
	</body>

</html>

没有多大的麻烦。而且有备注，就不多解释了

效果图如下：