html+css+JavaScript九宫格抽奖

HTML、CSS和JavaScript可以组合创建一个有趣的九宫格抽奖游戏。以下是一个简化的步骤说明：

1. **HTML结构**:
使用 `<div>` 创建九个方块作为网格容器，每个方块代表一个奖品。你可以设置每个方块的`class`属性以便在CSS中定位和样式化。

<div class="grid-1">奖品1</div>
  <!-- 其他8个类似 -->
</div>

2. **CSS布局**:
使用 CSS 的 flexbox 或 grid 来创建九宫格布局，并为每个 `.box` 类添加样式，如背景颜色、边框等。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.box {
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
}

3. **JavaScript交互**:
使用 JavaScript 获取用户的选择（例如点击事件监听器），然后随机选择一个奖品的标识符，更新相应的`.box`元素内容。

const boxes = document.querySelectorAll('.box');

function drawPrize() {
  const randomIndex = Math.floor(Math.random() * boxes.length);
  boxes[randomIndex].innerText = '恭喜，你抽到了...'; // 更具体的奖品信息
}

// 鼠标点击某个盒子触发抽奖
boxes.forEach(box => box.addEventListener('click', drawPrize));