当前位置：首页 > JavaScript

js实现摇奖

2026-03-13 18:13:45JavaScript

实现摇奖功能的基本思路

摇奖功能的核心是通过随机数生成器从候选列表中随机选取一个或多个结果。JavaScript提供了Math.random()方法生成伪随机数，结合数组操作即可实现基础摇奖逻辑。

基础随机选择实现

function drawPrize(prizes) {
  const randomIndex = Math.floor(Math.random() * prizes.length);
  return prizes[randomIndex];
}

// 使用示例
const prizeList = ['一等奖', '二等奖', '三等奖', '谢谢参与'];
const result = drawPrize(prizeList);
console.log(result);

带权重的摇奖系统

某些场景需要不同奖项有不同的中奖概率，可以通过权重系统实现：

js实现摇奖

function weightedDraw(prizes) {
  // 计算总权重
  const totalWeight = prizes.reduce((sum, prize) => sum + prize.weight, 0);
  // 生成随机数
  const random = Math.random() * totalWeight;

  let currentWeight = 0;
  for (const prize of prizes) {
    currentWeight += prize.weight;
    if (random <= currentWeight) {
      return prize.name;
    }
  }
}

// 使用示例
const weightedPrizes = [
  { name: '特等奖', weight: 1 },
  { name: '一等奖', weight: 5 },
  { name: '二等奖', weight: 10 },
  { name: '三等奖', weight: 30 },
  { name: '参与奖', weight: 100 }
];
console.log(weightedDraw(weightedPrizes));

可视化摇奖动画

为了增强用户体验，可以添加滚动动画效果：

js实现摇奖

function animateDraw(elementId, prizes, duration = 3000) {
  const element = document.getElementById(elementId);
  let startTime = null;
  const frameDuration = 100; // 每帧间隔(ms)

  function updateFrame(timestamp) {
    if (!startTime) startTime = timestamp;
    const progress = Math.min((timestamp - startTime) / duration, 1);
    const currentIndex = Math.floor(progress * prizes.length * 10) % prizes.length;
    element.textContent = prizes[currentIndex];

    if (progress < 1) {
      requestAnimationFrame(updateFrame);
    } else {
      // 最终结果
      const finalIndex = Math.floor(Math.random() * prizes.length);
      element.textContent = prizes[finalIndex];
    }
  }

  requestAnimationFrame(updateFrame);
}

// 使用示例
// HTML中需要有<div id="prizeDisplay"></div>
animateDraw('prizeDisplay', ['奖品1', '奖品2', '奖品3', '奖品4']);

多奖项同时抽取

需要一次性抽取多个不同奖项时：

function multiDraw(prizes, count) {
  // 复制数组避免修改原数组
  const tempPrizes = [...prizes];
  const results = [];

  for (let i = 0; i < count && tempPrizes.length > 0; i++) {
    const randomIndex = Math.floor(Math.random() * tempPrizes.length);
    results.push(tempPrizes[randomIndex]);
    // 移除已抽中的奖项
    tempPrizes.splice(randomIndex, 1);
  }

  return results;
}

// 使用示例
console.log(multiDraw(['奖1', '奖2', '奖3', '奖4'], 2));

防止重复中奖

在多次抽奖场景中防止同一用户重复中奖：

class LotterySystem {
  constructor(prizes) {
    this.originalPrizes = [...prizes];
    this.availablePrizes = [...prizes];
  }

  draw() {
    if (this.availablePrizes.length === 0) {
      console.log('所有奖品已抽完');
      return null;
    }

    const randomIndex = Math.floor(Math.random() * this.availablePrizes.length);
    const prize = this.availablePrizes[randomIndex];
    this.availablePrizes.splice(randomIndex, 1);

    return prize;
  }

  reset() {
    this.availablePrizes = [...this.originalPrizes];
  }
}

// 使用示例
const system = new LotterySystem(['奖1', '奖2', '奖3']);
console.log(system.draw());
console.log(system.draw());
console.log(system.draw());
system.reset();