首页js实现九宫格抽奖机

js实现九宫格抽奖机

时间: 2024-12-21 10:24:02 浏览: 10

在JavaScript中实现九宫格抽奖机通常涉及到动态渲染和随机选择奖项的功能。这里提供一个简化的示例，使用HTML、CSS和JavaScript来创建一个基本的九宫格抽奖机： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; width: 300px; padding: 10px; box-sizing: border-box; } .cell { cursor: pointer; } </style> </head> <body> <div id="grid" class="grid"></div> <script> const prizes = ['一等奖', '二等奖', '三等奖', '谢谢参与']; const gridContainer = document.getElementById('grid'); // 创建9个单元格 for (let i = 0; i < 9; i++) { const cell = document.createElement('div'); cell.classList.add('cell'); cell.textContent = '空白'; cell.addEventListener('click', () => draw()); gridContainer.appendChild(cell); } function draw() { const randomIndex = Math.floor(Math.random() * prizes.length); gridContainer.children.forEach((cell, index) => { if (index === randomIndex) { cell.textContent = prizes[randomIndex]; cell.classList.remove('cell'); cell.classList.add('won-prize'); // 添加获奖样式 } else { cell.textContent = '空白'; } }); } </script> </body> </html> ``` 这个例子中，我们首先在HTML中创建了一个九宫格容器，并为每个单元格添加了点击事件监听器。每次点击，`draw`函数会被调用，它会随机选择一个奖项并显示在对应的单元格上。为了使抽奖更具互动性，可以在`draw`函数中加入一些视觉动画效果，如淡入淡出等。

阅读全文