首页写一个九宫格抽奖的页面

写一个九宫格抽奖的页面

时间: 2023-05-23 21:05:40 浏览: 63

A： <!DOCTYPE html> <html> <head> <title>九宫格抽奖</title> <style> .container { width: 300px; height: 300px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border: 1px solid black; } .item { width: 80px; height: 80px; background-color: #f1f1f1; display: flex; justify-content: center; align-items: center; font-size: 24px; box-sizing: border-box; border: 1px solid black; } .item.win { background-color: red; color: white; } .btn { display: block; margin: 20px auto; padding: 10px 20px; background-color: #4CAF50; color: white; text-align: center; text-decoration: none; border: none; border-radius: 5px; font-size: 20px; cursor: pointer; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> <button class="btn">开始抽奖</button> <script> const items = document.querySelectorAll('.item'); const btn = document.querySelector('.btn'); function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function resetItems() { items.forEach((item) => { item.classList.remove('win'); }) } function spin() { resetItems(); const num = getRandomInt(1, 9); const item = items[num - 1]; item.classList.add('win'); } btn.addEventListener('click', spin); </script> </body> </html> 说明：本页面通过 HTML、CSS 和 JS 实现了一个九宫格抽奖的功能。通过点击页面下方的“开始抽奖”按钮，可以随机选定一个格子作为中奖格，该格子会被高亮显示。