html抽奖不重复,js不重复抽奖代码实例

以下是一个不重复抽奖的 HTML 和 JavaScript 代码实例：

HTML 代码：

<div>
  <h3>参与抽奖名单</h3>
  <ul id="names">
    <li>小明</li>
    <li>小红</li>
    <li>小刚</li>
    <li>小美</li>
  </ul>
  <button onclick="drawWinner()">抽奖</button>
</div>

<div>
  <h3>中奖名单</h3>
  <ul id="winners"></ul>
</div>

JavaScript 代码：

// 定义参与抽奖的名单
const names = ['小明', '小红', '小刚', '小美'];

// 定义中奖名单
const winners = [];

// 抽奖函数
function drawWinner() {
  const namesLength = names.length;
  
  // 如果所有人都已经中奖，则提示抽奖已经结束
  if (winners.length === namesLength) {
    alert('抽奖已经结束！');
    return;
  }
  
  // 循环随机抽取一个未中奖的名字
  while (true) {
    const randomIndex = Math.floor(Math.random() * namesLength);
    const randomName = names[randomIndex];
    if (!winners.includes(randomName)) {
      winners.push(randomName);
      break;
    }
  }
  
  // 在中奖名单中显示中奖者
  const winnersElement = document.getElementById('winners');
  const liElement = document.createElement('li');
  liElement.textContent = winners[winners.length - 1];
  winnersElement.appendChild(liElement);
}

在这个例子中，我们定义了一个 `names` 数组来存储参与抽奖的名单，一个 `winners` 数组来存储中奖名单。当用户点击“抽奖”按钮时，我们将随机从未中奖的名字中选出一个中奖者，并将其添加到 `winners` 数组中。如果所有人都已经中奖，则提示抽奖已经结束。

这个例子使用了 `Math.random()` 函数来生成一个随机数，以及 `Array.includes()` 函数来检查一个名字是否已经中奖。