JavaScript幸运大转盘

最新推荐文章于 2024-05-16 11:44:55 发布

深巷的猫&fan

最新推荐文章于 2024-05-16 11:44:55 发布

阅读量797

点赞数 3

分类专栏： javascript 前端文章标签： html5 html javascript

本文链接：https://blog.csdn.net/weixin_45921972/article/details/121602004

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

javascript

8 篇文章 0 订阅

订阅专栏

需求说明：

使用点击事件等相关知识点完成幸运大转盘页面打开时，出现九宫格蓝色色块，色块内分别是奖品，当点击开始按钮时，有一个灰色色块开始转动，点击停止按钮时，灰色按钮停在哪里，就表示所中的奖品是什么

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.container {
			margin: 50px auto;
			width: 500px;
			height: 500px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
		}

		.container>div {
			width: 150px;
			height: 150px;
			background-color: skyblue;
			color: #ffffff;
			text-align: center;
			line-height: 150px;
		}

		button {
			width: 60px;
			height: 30px;
		}
	</style>
	<body>
		<div class="container">
			<div data-value="1">600元优惠券</div>
			<div data-value="2">800元优惠券</div>
			<div data-value="3">1000元优惠券</div>
			<div data-value="0">800元优惠券</div>
			<div data-value="8">
				<button>开始</button>
				<button>停止</button>
			</div>
			<div data-value="4">600元优惠券</div>
			<div data-value="7">600元优惠券</div>
			<div data-value="6">1000元优惠券</div>
			<div data-value="5">800元优惠券</div>
		</div>

		<script type="text/javascript">
			//获取元素
			var _divs = document.querySelectorAll(".container>div");
			var _btns = document.querySelectorAll(".container>div>button");
			var timer;
			var index = 0;//定义一个数
			_btns[0].onclick = function() {
				clearInterval(timer);//控制每次点击都清空上一次【不会出现每次点击都自动加快的效果】
				//定义时间  设置计时器
				timer = setInterval(() => {
					for (var i = 0; i < _divs.length; i++) {
						_divs[i].style.backgroundColor = "skyblue";
					}
					for (var j = 0; j < _divs.length; j++) {
						if (parseInt(_divs[j].getAttribute("data-value")) == index % 8) {
							_divs[j].style.backgroundColor = "gray";
							break;
						}
					}
					index++;
				}, 100)
			}
			_btns[1].onclick = function() {
				clearInterval(timer);
			}
		</script>
	</body>
</html>

深巷的猫&fan

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript幸运大转盘

需求说明：使用点击事件等相关知识点完成幸运大转盘页面打开时，出现九宫格蓝色色块，色块内分别是奖品，当点击开始按钮时，有一个灰色色块开始转动，点击停止按钮时，灰色按钮停在哪里，就表示所中的奖品是什么<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/c.
复制链接

扫一扫