1.先写好html 页面要呈现的内容。
HTML内容如下：
<div class="Sudoku"> <div class="one">口红</div> <div class="two">耳机</div> <div class="three">衣服</div> <div class="four">华为p60</div> <div class="five">键盘</div> <div class="six">美甲</div> <div class="seven">苹果15</div> <div class="eight">蛋糕</div> <button class="click" id="clicks">点击抽奖</button> </div>
2.然后使用CSS样式给内容添加颜色大小做好定位。
CSS样式如下：
<style> .Sudoku { width: 380px; height: 380px; position: relative; } .click { width: 100px; height: 100px; text-align: center; line-height: 100px; margin: 20px; background-color: #aaff7f; position: absolute; margin-top: 140px; margin-left: 140px; } .one { width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: mistyrose; position: absolute; margin: 20px; } .two { width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: mistyrose; position: absolute; margin-left: 140px; margin-top: 20px; } .three { width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: mistyrose; position: absolute; margin-left: 260px; margin-top: 20px; } .four { width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: mistyrose; position: absolute; margin-left: 260px; margin-top: 140px; } .five { width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: mistyrose; position: absolute; margin-left: 260px; margin-top: 260px; } .six { width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: mistyrose; position: absolute; margin-left: 140px; margin-top: 260px; } .seven { width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: mistyrose; position: absolute; margin-left: 20px; margin-top: 260px; } .eight { width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: mistyrose; position: absolute; margin-left: 20px; margin-top: 140px; } </style>
JS代码如下：
<script> let clicks = document.getElementById('clicks'); let Sudoku = document.getElementsByClassName('Sudoku')[0]; let prizes = Sudoku.getElementsByTagName('div'); console.log(prizes); let i = 0; let speed = 0; let time = 500; let inter; let num; clicks.onclick = asbo; function asbo() { prizes[i].style.backgroundColor = '#d6c5ff'; inter = setInterval(rotates, time); num = Math.floor(Math.random() * prizes.length); console.log(num); clicks.onclick = null; } function rotates() { if (i < prizes.length - 1) { i++; prizes[i].style.backgroundColor = '#d6c5ff'; prizes[i - 1].style.backgroundColor = '#FFE4E1'; console.log(time); } else { i = 0; prizes[i].style.backgroundColor = '#d6c5ff'; prizes[prizes.length - 1].style.backgroundColor = '#FFE4E1'; speed++; console.log(speed); } if (speed < 2) { time -= 100; if (time < 100) { time = 100 } } else if (speed > 4) { time += 70; if (time > 1000) { time = 1000; } } if (i == num && speed > 5) { clearInterval(inter); setTimeout(function() { alert("恭喜获得" + prizes[i].innerHTML); speed = 0; clicks.onclick = asbo; }, 300); } else { clearInterval(inter); inter = setInterval(rotates, time); } } </script>
