当前位置：首页 > JavaScript

js实现抽奖号码

2026-02-03 08:38:20JavaScript

实现抽奖号码的JavaScript方法

生成随机号码

使用Math.random()生成随机数，结合Math.floor()确保结果为整数。例如生成1-100的随机号码：

const randomNumber = Math.floor(Math.random() * 100) + 1;

确保不重复抽奖

使用Set数据结构存储已抽中的号码，避免重复：

const drawnNumbers = new Set();
function drawUniqueNumber(max) {
  if (drawnNumbers.size >= max) return null;

  let num;
  do {
    num = Math.floor(Math.random() * max) + 1;
  } while (drawnNumbers.has(num));

  drawnNumbers.add(num);
  return num;
}

批量生成抽奖号码

需要生成多个不重复的抽奖号码时，可以使用Fisher-Yates洗牌算法：

function generateLotteryNumbers(total, max) {
  const pool = Array.from({length: max}, (_, i) => i + 1);

  for (let i = pool.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [pool[i], pool[j]] = [pool[j], pool[i]];
  }

  return pool.slice(0, total);
}

可视化展示结果

将生成的号码动态显示在页面上：

js实现抽奖号码

function displayNumbers(numbers) {
  const container = document.getElementById('lottery-results');
  container.innerHTML = numbers.map(num => 
    `<div class="lottery-number">${num}</div>`
  ).join('');
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .lottery-number {
      display: inline-block;
      width: 50px;
      height: 50px;
      margin: 5px;
      background-color: #ff4757;
      color: white;
      text-align: center;
      line-height: 50px;
      font-size: 24px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <button id="draw-btn">抽奖</button>
  <div id="lottery-results"></div>

  <script>
    const drawnNumbers = new Set();

    document.getElementById('draw-btn').addEventListener('click', () => {
      const num = drawUniqueNumber(100);
      if (num) {
        drawnNumbers.add(num);
        displayNumbers([...drawnNumbers]);
      } else {
        alert('所有号码已抽完！');
      }
    });

    function drawUniqueNumber(max) {
      if (drawnNumbers.size >= max) return null;

      let num;
      do {
        num = Math.floor(Math.random() * max) + 1;
      } while (drawnNumbers.has(num));

      return num;
    }

    function displayNumbers(numbers) {
      const container = document.getElementById('lottery-results');
      container.innerHTML = numbers.map(num => 
        `<div class="lottery-number">${num}</div>`
      ).join('');
    }
  </script>
</body>
</html>