当前位置：首页 > JavaScript

js 实现抽奖

2026-02-02 11:38:36JavaScript

实现抽奖功能的核心逻辑

抽奖功能的实现通常包括奖项配置、概率计算、结果展示等模块。以下是一个基于JavaScript的简单抽奖实现方案：

奖项概率配置

定义奖项数组，每个奖项包含名称、概率等属性。概率可以使用小数或整数表示：

const prizes = [
  { name: '一等奖', probability: 0.01 },
  { name: '二等奖', probability: 0.05 },
  { name: '三等奖', probability: 0.1 },
  { name: '参与奖', probability: 0.84 }
];

概率计算函数

创建一个根据概率随机选择奖项的函数。这里使用累积概率区间的方法：

function drawPrize(prizes) {
  const random = Math.random();
  let cumulativeProbability = 0;

  for (const prize of prizes) {
    cumulativeProbability += prize.probability;
    if (random <= cumulativeProbability) {
      return prize;
    }
  }

  return prizes[prizes.length - 1]; // 默认返回最后一个奖项
}

动画效果实现

为增强用户体验，可以添加简单的转盘动画效果：

function startAnimation(element, duration, callback) {
  let start = null;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const rotation = (progress / duration) * 360 % 360;
    element.style.transform = `rotate(${rotation}deg)`;

    if (progress < duration) {
      window.requestAnimationFrame(step);
    } else {
      callback();
    }
  }

  window.requestAnimationFrame(step);
}

完整示例代码

将上述组件组合成一个完整的抽奖实现：

document.getElementById('draw-button').addEventListener('click', function() {
  const wheel = document.getElementById('prize-wheel');
  const resultDisplay = document.getElementById('result');

  // 禁用按钮防止重复点击
  this.disabled = true;
  resultDisplay.textContent = '抽奖中...';

  // 启动动画
  startAnimation(wheel, 3000, function() {
    // 动画结束后执行抽奖
    const prize = drawPrize(prizes);
    resultDisplay.textContent = `恭喜获得: ${prize.name}`;

    // 重新启用按钮
    document.getElementById('draw-button').disabled = false;
  });
});

概率验证测试

为确保概率配置正确，可以进行大规模测试验证：

function testProbability(prizes, trials = 10000) {
  const results = {};

  // 初始化结果对象
  prizes.forEach(prize => {
    results[prize.name] = 0;
  });

  // 执行多次抽奖
  for (let i = 0; i < trials; i++) {
    const prize = drawPrize(prizes);
    results[prize.name]++;
  }

  // 计算实际概率
  for (const name in results) {
    results[name] = results[name] / trials;
  }

  return results;
}

console.log(testProbability(prizes));