当前位置：首页 > JavaScript

js实现手机号码抽奖

2026-03-02 03:25:08JavaScript

实现手机号码抽奖的JavaScript方法

基础抽奖功能实现

使用Math.random()生成随机索引从手机号数组中选取中奖号码：

js实现手机号码抽奖

const phoneNumbers = ['13800138000', '13900139000', '15000150000'];
const winnerIndex = Math.floor(Math.random() * phoneNumbers.length);
const winnerNumber = phoneNumbers[winnerIndex];
console.log(`中奖号码: ${winnerNumber}`);

防止重复中奖机制

使用Set数据结构记录已中奖号码，避免重复抽取：

js实现手机号码抽奖

const drawnNumbers = new Set();
function drawLottery() {
  const availableNumbers = phoneNumbers.filter(num => !drawnNumbers.has(num));
  if (availableNumbers.length === 0) return "所有号码已抽完";

  const winner = availableNumbers[Math.floor(Math.random() * availableNumbers.length)];
  drawnNumbers.add(winner);
  return winner;
}

可视化抽奖动画效果

添加旋转动画模拟抽奖过程：

function animateDraw(displayElement, duration = 3000) {
  let startTime = null;
  function frame(timestamp) {
    if (!startTime) startTime = timestamp;
    const progress = timestamp - startTime;
    const randomIndex = Math.floor(Math.random() * phoneNumbers.length);
    displayElement.textContent = phoneNumbers[randomIndex];

    if (progress < duration) {
      requestAnimationFrame(frame);
    } else {
      const finalWinner = drawLottery();
      displayElement.textContent = finalWinner || "抽奖结束";
    }
  }
  requestAnimationFrame(frame);
}

加权抽奖算法

根据权重值实现不同中奖概率：

const weightedNumbers = [
  { number: '13800138000', weight: 1 },
  { number: '13900139000', weight: 3 },
  { number: '15000150000', weight: 6 }
];

function weightedDraw() {
  const totalWeight = weightedNumbers.reduce((sum, item) => sum + item.weight, 0);
  let random = Math.random() * totalWeight;

  for (const item of weightedNumbers) {
    if (random < item.weight) return item.number;
    random -= item.weight;
  }
}

完整示例代码

<!DOCTYPE html>
<html>
<body>
  <div id="display">准备抽奖...</div>
  <button onclick="startDraw()">开始抽奖</button>

  <script>
    const numbers = ['13800138000', '13900139000', '15000150000'];
    const drawn = new Set();
    const display = document.getElementById('display');

    function startDraw() {
      animateDraw(display, 2000);
    }

    function animateDraw(element, duration) {
      let start = null;
      function frame(timestamp) {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        element.textContent = numbers[Math.floor(Math.random() * numbers.length)];

        if (progress < duration) {
          requestAnimationFrame(frame);
        } else {
          const winner = drawWinner();
          element.textContent = winner || "所有奖品已抽完";
        }
      }
      requestAnimationFrame(frame);
    }

    function drawWinner() {
      const available = numbers.filter(n => !drawn.has(n));
      if (available.length === 0) return null;

      const winner = available[Math.floor(Math.random() * available.length)];
      drawn.add(winner);
      return winner;
    }
  </script>
</body>
</html>