当前位置：首页 > JavaScript

js实现抽奖

2026-01-13 14:35:34JavaScript

实现抽奖功能的基本思路

抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项，利用随机数生成索引，最后通过动画增强用户体验。

准备奖项数据

定义一个数组存储奖项信息，每个奖项可以包含名称、图片、概率等属性。

const prizes = [
  { name: '一等奖', probability: 0.1 },
  { name: '二等奖', probability: 0.2 },
  { name: '三等奖', probability: 0.3 },
  { name: '谢谢参与', probability: 0.4 }
];

概率计算与随机选择

根据奖项概率计算权重区间，生成随机数确定中奖项。

js实现抽奖

function getRandomPrize() {
  let random = Math.random();
  let currentProb = 0;

  for (let prize of prizes) {
    currentProb += prize.probability;
    if (random <= currentProb) {
      return prize;
    }
  }
  return prizes[prizes.length - 1];
}

添加动画效果

使用CSS动画或JavaScript定时器实现转盘效果，增强用户体验。

function startAnimation() {
  let count = 0;
  const maxCount = 30;
  const interval = setInterval(() => {
    count++;
    const randomIndex = Math.floor(Math.random() * prizes.length);
    updateDisplay(prizes[randomIndex]);

    if (count >= maxCount) {
      clearInterval(interval);
      const finalPrize = getRandomPrize();
      updateDisplay(finalPrize);
    }
  }, 100);
}

显示结果

更新DOM元素展示中奖结果，可以添加音效或视觉效果。

js实现抽奖

function updateDisplay(prize) {
  const resultElement = document.getElementById('result');
  resultElement.textContent = prize.name;
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    #result {
      font-size: 24px;
      margin: 20px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <button onclick="startLottery()">开始抽奖</button>
  <div id="result"></div>

  <script>
    const prizes = [
      { name: '一等奖', probability: 0.1 },
      { name: '二等奖', probability: 0.2 },
      { name: '三等奖', probability: 0.3 },
      { name: '谢谢参与', probability: 0.4 }
    ];

    function getRandomPrize() {
      let random = Math.random();
      let currentProb = 0;

      for (let prize of prizes) {
        currentProb += prize.probability;
        if (random <= currentProb) {
          return prize;
        }
      }
      return prizes[prizes.length - 1];
    }

    function startLottery() {
      let count = 0;
      const maxCount = 30;
      const interval = setInterval(() => {
        count++;
        const randomIndex = Math.floor(Math.random() * prizes.length);
        updateDisplay(prizes[randomIndex]);

        if (count >= maxCount) {
          clearInterval(interval);
          const finalPrize = getRandomPrize();
          updateDisplay(finalPrize);
        }
      }, 100);
    }

    function updateDisplay(prize) {
      document.getElementById('result').textContent = prize.name;
    }
  </script>
</body>
</html>