栅格化布局做的简单抽奖

2022-06-24 10:33:00 阅读：197 来源： 互联网

标签：抽奖 start column 布局栅格 grid nth div row

　　　用栅格化布局做的一个抽奖机，里面的内容可自行修改。

　　　下面就开始分享代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 让article变成容器 */
			article {
				width: 800px;
				height: 910px;
				border: 1px saddlebrown solid;
				display: grid;
				grid-template-rows: repeat(6, 1fr);
				grid-template-columns: repeat(6, 1fr);
			}
			/* div样式 */
			div {
				border: 1px saddlebrown solid;
				text-align: center;
				line-height: 150px;
			}
			/* 下面是给盒子调样式 */
			div:nth-child(7) {
				grid-row-start: 2;
				grid-column-start: 6;
			}

			div:nth-child(8) {
				grid-row-start: 3;
				grid-column-start: 6;
			}

			div:nth-child(9) {
				grid-row-start: 4;
				grid-column-start: 6;
			}

			div:nth-child(10) {
				grid-row-start: 5;
				grid-column-start: 6;
			}

			div:nth-child(11) {
				grid-row-start: 6;
				grid-column-start: 6;
			}

			div:nth-child(12) {
				grid-row-start: 6;
				grid-column-start: 5;
			}

			div:nth-child(13) {
				grid-row-start: 6;
				grid-column-start: 4;
			}

			div:nth-child(14) {
				grid-row-start: 6;
				grid-column-start: 3;
			}

			div:nth-child(15) {
				grid-row-start: 6;
				grid-column-start: 2;
			}

			div:nth-child(16) {
				grid-row-start: 6;
				grid-column-start: 1;
			}

			div:nth-child(17) {
				grid-row-start: 5;
				grid-column-start: 1;
			}

			div:nth-child(18) {
				grid-row-start: 4;
				grid-column-start: 1;
			}

			div:nth-child(19) {
				grid-row-start: 3;
				grid-column-start: 1;
			}

			button:nth-child(21) {
				grid-row-start: 3;
				grid-column-start: 3;
			}

			button:nth-child(22) {
				grid-row-start: 3;
				grid-column-start: 4;
			}
		</style>
	</head>
	<body>
		<article>
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
			<div>13</div>
			<div>14</div>
			<div>15</div>
			<div>16</div>
			<div>17</div>
			<div>18</div>
			<div>19</div>
			<div>20</div>
			<button type="button">开始</button>
			<button type="button">停止</button>
		</article>
		<script type="text/javascript">
			// 获取所有的盒子
			var div = document.querySelectorAll('div')
			// 获取两个按钮
			var btn = document.querySelectorAll('button')
			// 定义一个空值为定时器做准备
			var timer = null
			// 定义一个计数器
			var i = 0
			// 为开始设置点击事件
			btn[0].onclick = function() {
				// 定义定时器
				timer = setInterval(function() {
					// 让计数器依次递增
					i++
					// 这里就是排他思想
					for (var j =0;j< div.length;j++) {
							// 让其他div的背景颜色变成空
							div[j].style.backgroundColor = ''
					}
					// 判断计数器如果大于20的话
					if (i >= 20) {
						// 就让背景颜色回归原位
						i = -1
					} else {
						// 否则背景颜色就变化
						div[i].style.backgroundColor = '#FFD700'
					}
					// 每隔10毫秒执行一次
				}, 10)
			}
			// 给停止设置点击事件
			btn[1].onclick = function() {
				// 点击之后停止定时器
				clearInterval(timer)
			}
		</script>
	</body>
</html>

标签：抽奖,start,column,布局,栅格,grid,nth,div,row
来源： https://www.cnblogs.com/liziqian001/p/16407850.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

栅格化布局做的简单抽奖