用HTML+JS+CSS写一个九宫格抽奖功能并且能控制中奖概率

以下是一个简单的九宫格抽奖功能的HTML+JS+CSS代码示例：

HTML代码：

<div class="grid-container">
  <div class="grid-item" id="item1">1</div>
  <div class="grid-item" id="item2">2</div>
  <div class="grid-item" id="item3">3</div>
  <div class="grid-item" id="item4">4</div>
  <div class="grid-item" id="item5">5</div>
  <div class="grid-item" id="item6">6</div>
  <div class="grid-item" id="item7">7</div>
  <div class="grid-item" id="item8">8</div>
  <div class="grid-item" id="item9">9</div>
</div>
<button id="spinBtn">Spin</button>

CSS代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  width: 300px;
  height: 300px;
  margin: 20px auto;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  font-weight: bold;
  background-color: #fff;
  border: 2px solid #000;
}

#spinBtn {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  background-color: #00c;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JS代码：

// 设置中奖概率
let probability = 0.3;

// 获取九宫格元素
let items = document.querySelectorAll('.grid-item');

// 获取抽奖按钮元素
let spinBtn = document.getElementById('spinBtn');

// 定义抽奖函数
function spin() {
  // 随机生成一个0-1之间的浮点数
  let rand = Math.random();

  // 如果随机数小于中奖概率，则随机选中一个中奖元素
  if (rand < probability) {
    let winIndex = Math.floor(Math.random() * items.length);
    items[winIndex].classList.add('winner');
    alert('Congratulations! You Win!');
  }
  // 否则，不中奖
  else {
    alert('Sorry, You Lose!');
  }
}

// 给抽奖按钮添加点击事件
spinBtn.addEventListener('click', spin);

在上述代码中，我们使用了CSS的grid布局来创建了一个3x3的九宫格，每个小格子里显示的是数字1-9。我们还定义了一个抽奖按钮，当点击该按钮时，会调用spin函数进行抽奖。

在spin函数中，我们首先生成一个0-1之间的随机浮点数，然后与设定的中奖概率进行比较。如果随机数小于中奖概率，则随机选中一个中奖元素，并给该元素添加winner类名，同时弹出中奖提示框。否则，就弹出不中奖提示框。

最后，在JS代码中，我们使用了querySelectorAll方法获取了所有的grid-item元素，使用了addEventListener方法给抽奖按钮添加了一个点击事件，并将spin函数作为事件处理程序