用栅格化布局做的一个抽奖机，里面的内容可自行修改。
下面就开始分享代码：
<!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>
原创文章，作者：wure，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/270239.html