当前位置：首页 > JavaScript

js 实现抽奖

2026-04-07 05:10:05JavaScript

实现抽奖功能的基本思路

抽奖功能的核心在于随机选择奖项，并展示抽奖过程以增加趣味性。以下是一个简单的实现方案：

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

// 根据概率随机选择奖项
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 startDrawAnimation(element, duration = 3000) {
  let startTime = null
  const prizesList = prizes.map(p => p.name)

  function animate(timestamp) {
    if (!startTime) startTime = timestamp
    const progress = timestamp - startTime

    // 快速切换显示奖项
    const index = Math.floor(progress / 100) % prizesList.length
    element.textContent = prizesList[index]

    if (progress < duration) {
      requestAnimationFrame(animate)
    } else {
      // 动画结束，显示最终结果
      const result = drawPrize(prizes)
      element.textContent = result.name
    }
  }

  requestAnimationFrame(animate)
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>抽奖Demo</title>
  <style>
    #result {
      font-size: 24px;
      margin: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      min-height: 50px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="result">等待抽奖...</div>
  <button id="drawBtn">开始抽奖</button>

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

    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 startDrawAnimation(element, duration = 3000) {
      let startTime = null
      const prizesList = prizes.map(p => p.name)

      function animate(timestamp) {
        if (!startTime) startTime = timestamp
        const progress = timestamp - startTime

        const index = Math.floor(progress / 100) % prizesList.length
        element.textContent = prizesList[index]

        if (progress < duration) {
          requestAnimationFrame(animate)
        } else {
          const result = drawPrize(prizes)
          element.textContent = result.name
        }
      }

      requestAnimationFrame(animate)
    }

    document.getElementById('drawBtn').addEventListener('click', function() {
      const resultElement = document.getElementById('result')
      resultElement.textContent = '抽奖中...'
      startDrawAnimation(resultElement)
    })
  </script>
</body>
</html>

高级功能扩展

概率调整功能

function adjustProbabilities(prizes) {
// 确保概率总和为1
const total = prizes.reduce((sum, prize) => sum + prize.probability, 0)
return prizes.map(prize => ({
 ...prize,
 probability: prize.probability / total
}))
}

多次抽奖限制
```
let drawCount = 0
const maxDraws = 3
```

document.getElementById('drawBtn').addEventListener('click', function() { if (drawCount >= maxDraws) { alert('抽奖次数已达上限') return }

drawCount++ const resultElement = document.getElementById('result') resultElement.textContent = 抽奖中... (剩余${maxDraws - drawCount}次) startDrawAnimation(resultElement) })

js 实现抽奖


3. 中奖记录保存
```javascript
const drawHistory = []

function saveDrawResult(result) {
  drawHistory.push({
    prize: result.name,
    time: new Date().toLocaleString()
  })
  console.log('抽奖记录:', drawHistory)
}

标签: js