js九宫格抽奖机，单击中间格子进行随机选择一个周围格子

在JavaScript中创建一个九宫格抽奖机功能，通常会涉及HTML布局、CSS样式以及一些交互逻辑。以下是一个简单的示例：

首先，在HTML中创建一个网格结构，中间一个按钮用于触发抽奖：

<div class="grid">
  <div class="cell" id="center">点击我</div>
  <div class="cell" onclick="draw()"></div>
  <div class="cell" onclick="draw()"></div>
  <!-- ... 重复八次 -->
</div>
<button onclick="draw()">开始抽奖</button>

然后，添加CSS样式来美化它：

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

.cell {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

接下来，编写JavaScript函数`draw()`，它会检查当前中间格子的选择，并随机从周围的八个格子中选取一个：

let drawnCell = null; // 存储已经抽取的格子

function draw() {
  if (!drawnCell) { // 首次点击或没有抽过奖
    const centerCell = document.getElementById('center');
    centerCell.classList.add('active'); // 标记已选
    drawnCell = centerCell;

    // 随机选择相邻格子
    const neighbors = Array.from(document.querySelectorAll('.cell:not(.active)'));
    const randomIndex = Math.floor(Math.random() * neighbors.length);
    const selectedNeighbor = neighbors[randomIndex];
    selectedNeighbor.classList.add('selected'); // 显示所抽格子
  } else {
    alert('已抽奖，不能再抽！');
  }
}

在这个例子中，我们假设`.active`和`.selected`是预先定义好的CSS类，分别表示中心格子已被选择和某个邻格已被抽中。