我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”
详细说明
今天打开掘金，忽然想到一个很悲伤的故事，几乎天天签到，就是没抽到过奖，唉。
天天这么的伤心，这可不行，今天就来实现一个简单的抽奖，满足一下自己（虽然没有奖品）。
抽奖需要用到什么呢，奖品是必不可少的，将奖品的图片放在页面上；掘金用的是算法，咱不用搞得那么复杂，就自己玩玩，就随机吧，中与不中，一切听天由命。
首先准备一个容器，用来装奖品图片的
<ul>
<li><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e19a99c0b2a43399e9cedf6d235405f~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?" alt=""/></li>
<li><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77b634472b7f4700a4060edbd8cb3cf3~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?" alt=""/></li>
<li><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4826808d48547fd966ceec758d8b7c5~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?" alt=""/></li>
<li><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b37abce75e5c4539b5c9f4395f6d05e6~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?" alt=""/></li>
<li><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4ce25d48b8405cbf5444b6195928d4~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp" alt=""/></li>
<li><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77d5e1e091a944b1b894029d22cdfcf0~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp?" alt=""/></li>
</ul>
容器和图片都放好后，就需要来给它上样式了。据图所示，每个格子大小一致，间隔一致，这种最好的就是采用格栅布局，也就是grid布局。没有选中的奖品图片就加上一层蒙层，可以采用opacity属性，将透明度降到0.1就可以。上样式代码。
ul {
width: 640px;
height: 394px;
list-style: none;
padding: 0;
border: 1px solid #ccc;
display: grid;
grid-template-columns: repeat(3, 200px);
grid-gap: 20px;
}
li {
height: 186px;
opacity: .5;
background-color: yellow;
}
img {
width: 200px;
height: 186px;
}
到了这一步，仅仅是完成了样式而已，它们此时还不会动起来，这时就需要强大的js了。使用setInterval没200毫秒就改变其中一个蒙层，持续3秒钟后停止。可以使用clearInterval删除事件。上代码：
let id = setInterval(() => bounce(), 100);
setTimeout(() => clearInterval(id), 3000)
function bounce() {
const index = Math.floor((Math.random() * 6));
$("li").css("opacity", 0.5);
$("li").eq(index).css("opacity", 1);
}
