其他分享
首页 > 其他分享> > 栅格化布局做的简单抽奖

栅格化布局做的简单抽奖

作者：互联网

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

　　　　

 

 　　　下面就开始分享代码：

<!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