栅格化布局做的简单抽奖

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

　　　下面就开始分享代码：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

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